Child component:
Vue.component('v-data', {
template: `
<div class="v-data">
<slot :visible-data="visibleData"></slot>
</div>
`,
computed: {
visibleData(){
return [1,2,3];
},
},
});
In parent component 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 components like this?
You are definitely looking for Scoped Slots. With this, one can easily pass data from the child component to the parent such that data could be referred to in the template being passed on to the child component. You can use it to pass data from your child component 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
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.
We can use Object Destructuring to directly access the property
passed to the parent component
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 recommend reading it here: Official Docs
