I am currently working with vue 2 and am finding a way to access parent component prop data within a slotted component

<template>
    <div class="grid-container">
        <div class="container">
            <div class="row justify-content-starts">
                <slot :block="block"></slot>                
            </div>
        </div>
    </div>
</template>

My parent class above contains a block prop and I want any child component inside of the slot to have access to this data.

<template v-slot="{ block }">
    <div>
        <p>Block: {{ block }}</p>
    </div>
</template>

For instance, a child component passed into the slot is something like this. However, I am unable to achieve this functionality even with the use of slot scope.

The error that I am getting is

vue.js:634 [Vue warn]: Property or method "block" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

I am currently working with vue 2 and am finding a way to access parent component prop data within a slotted component

<template>
    <div class="grid-container">
        <div class="container">
            <div class="row justify-content-starts">
                <slot :block="block"></slot>                
            </div>
        </div>
    </div>
</template>

My parent class above contains a block prop and I want any child component inside of the slot to have access to this data.

<template v-slot="{ block }">
    <div>
        <p>Block: {{ block }}</p>
    </div>
</template>

For instance, a child component passed into the slot is something like this. However, I am unable to achieve this functionality even with the use of slot scope.

The error that I am getting is

vue.js:634 [Vue warn]: Property or method "block" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

• vue.js
• vuejs2

• 1 " even with the use of slot scope" - what did you try? There is supposed to be v-slot for this, this wasn't shown – Estus Flask Commented Mar 10 at 13:10
• Hi @EstusFlask sorry missed adding the attempt at it. I have edited the post to include my attempt at using slot scopes but using v-slot. – Javier Tan Commented Mar 10 at 16:31
• It works as expected, stackblitz/edit/vue2-vite-starter-emb4braz . The problem you describe is not reproducible. If it persists, please, provide a way to reproduce. Make sure vue version is new enough to support v-slot – Estus Flask Commented Mar 10 at 16:52

1 Answer 1

Did you add this when declaring your parent component? :

<script>  
export default {  
  props: {  
    block: String,  
  }  
};  
</script>  

Then to use your parent component you add:

<template>
  <ParentComponentNameHere :block="'Example'">
    <template v-slot:default="{ block }">
      <p>Block: {{ block }}</p>
    </template>
  </ParentComponentNameHere>
</template>

Also notice, it is {{block}} not {block}