Передайте переменные через <slot>родительскому компоненту

Question

Дочерний компонент:

Vue.component('v-data', {

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

  computed: {

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

  },

});

В родительском компоненте я использую его так:

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

, но visibleData не передается в шаблоне. Я должен быть в состоянии получить 1,2,3.

Есть ли способ передачи переменных между компонентами, как это?

Answer 1

Вы определенно ищете Scoped Slots. Посредством этого можно легко передавать данные из дочернего компонента в родительский, так что данные могут быть переданы в шаблоне, передаваемом в дочерний компонент. Вы можете использовать для передачи данных из вашего дочернего компонента как

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

, который в родительском элементе можно обозначить как

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

Несколько вещей, которые следует отметить здесь

1. Свойства можно ссылаться с использованием имени слота. Здесь мы ссылаемся на слот по умолчанию, используя ключевое слово default.

2. Мы можем использовать Object Destructuring для прямого доступа к свойству, переданному родительскому компоненту

Санбокс присутствует ЗДЕСЬ

Answer 2

То, что вам нужно, это Scoped Slots, чтобы родитель мог видеть данные ребенка.

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

</v-data>

Возможно, я допустил некоторую ошибку здесь, но я бы рекомендовал прочитать ее здесь: Официальные документы