Child ponent:

Vueponent('v-data', {

  template: `
    <div class="v-data">
      <slot :visible-data="visibleData"></slot>
    </div>
  `,    

  puted: {

    visibleData(){
      return [1,2,3];
    },

  },

});

In parent ponent I am using it like this:

<v-data>
   <li v-for="x in visibleData">{{x}}</li>
</v-data>

but visibleData is not passed in the template. I should be able to get 1,2,3.

Is there a way to pass variables between ponents like this?

Child ponent:

Vue.ponent('v-data', {

  template: `
    <div class="v-data">
      <slot :visible-data="visibleData"></slot>
    </div>
  `,    

  puted: {

    visibleData(){
      return [1,2,3];
    },

  },

});

In parent ponent I am using it like this:

<v-data>
   <li v-for="x in visibleData">{{x}}</li>
</v-data>

but visibleData is not passed in the template. I should be able to get 1,2,3.

Is there a way to pass variables between ponents like this?

• javascript
• vue.js
• vue-ponent
• slots

• In Vue data gets passed down not up. You might be able to create a puted property on your parent that just returns the property from the child. This probably won't work but it's worth a shot. – Adam H Commented Apr 6, 2020 at 18:22

2 Answers 2

You are definitely looking for Scoped Slots. With this, one can easily pass data from the child ponent to the parent such that data could be referred to in the template being passed on to the child ponent. You can use it to pass data from your child ponent as

<div class="v-data">
    <slot :visible-data="visibleData"></slot>
</div>

Which can be referred in the parent as

<v-data>
  <template #default="{visibleData}">
    <li v-for="(value, index) in visibleData" :key="index">{{value}}</li>
  </template>
</v-data>

Few things to note here

1. The properties can be referred to using the name of the slot. Here we are referring to the default slot thus using the keyword default.

2. We can use Object Destructuring to directly access the property passed to the parent ponent

Sanbox present HERE

What you need is Scoped Slots So that parent can see the child's data.

<v-data>
   <template v-slot:default="slotProps">
      <li v-for="x in slotProps.visibleData">{{x}}</li>
   </template>

</v-data>

I might have made some mistake here, but I'd remend reading it here: Official Docs