javascript 将变量传递< slot>到父组件

zd287kbt 于 2023-06-04 发布在 Java

关注(0)|答案(2)|浏览(100)

子组件：

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。
有没有一种方法可以像这样在组件之间传递变量？

JavaScript

来源：https://stackoverflow.com/questions/61066094/pass-variables-through-slot-to-parent-component

2条答案

按热度按时间

9fkzdhlc1#

您正在寻找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来引用默认插槽。
1.我们可以使用Object Destructuring直接访问传递给父组件的属性
Sanbox present HERE

赞(0）回复(0）举报 2023-06-04

x759pob22#

你需要的是Scoped Slots，这样父节点就可以看到子节点的数据。

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

</v-data>

我可能在这里犯了一些错误，但我建议在这里阅读：官方文件

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 将变量传递< slot>到父组件

2条答案

相关问题

热门标签

最新问答