通过 <slot> 将变量传递给父组件答案

【问题标题】：Pass variables through <slot> to parent component通过 <slot> 将变量传递给父组件
【发布时间】：2020-07-18 19:44:47
【问题描述】：

子组件：

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。

有没有办法像这样在组件之间传递变量？

【问题讨论】：

在 Vue 中，数据不会向上传递。您可能能够在您的父级上创建一个计算属性，该属性仅返回子级的属性。这可能行不通，但值得一试。

标签： javascript vue.js vue-component slots

【解决方案1】：

您肯定在寻找Scoped Slots。通过这种方式，One 可以轻松地将数据从子组件传递到父组件，以便可以在传递给子组件的模板中引用数据。您可以使用将数据从您的子组件传递为

<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>

这里有几点需要注意

可以使用插槽的名称来引用属性。这里我们指的是默认插槽，因此使用关键字 default。
我们可以使用Object Destructuring直接访问属性传递给父组件

Sanbox 呈现HERE

【讨论】：

【解决方案2】：

你需要的是Scoped Slots，这样家长才能看到孩子的数据。

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

</v-data>

我可能在这里犯了一些错误，但我建议在这里阅读：Official Docs

【讨论】：