CODEWITHSUNDEEP
javascriptvue.jsvue-componentslots
Alex
Alex

Reputation: 68396

Pass variables through <slot> to parent component

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?

Upvotes: 4

Views: 9662

Answers (2)

Saksham
Saksham

Reputation: 9380

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

  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 component

Sanbox present HERE

Upvotes: 4

Giorgi Lagidze
Giorgi Lagidze

Reputation: 831

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

Upvotes: 0

Related Questions