VUE的作用域插槽

最新推荐文章于 2024-07-30 10:56:44 发布

又菜又卷

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量7.3k

点赞数 5

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_60811442/article/details/123538200

版权

VUE中的作用域插槽可以让父组件使用插槽时插槽内容能够访问子组件中的数据

带有如下模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，内容为子组件的 user对象的firstName属性。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user，而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

事实上，我们也可以使用解构来简化

<current-user>
  <template v-slot:default="{user}">
    {{ user.firstName }}
  </template>
</current-user>

关注