解构插槽 Prop

Qwe7

发布于 2022-05-28 17:32:10

6200

发布于 2022-05-28 17:32:10

解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：


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

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

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

你甚至可以定义后备内容，用于插槽 prop 是 ?developer/article/2012560/undefined 的情形：

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

注意

默认插槽名为default，可以省略default直接写v-slot。缩写为#时不能不写参数，写成#default（这点所有指令都一样，v-bind、v-on）

多个插槽混用时，v-slot不能省略default

只要出现多个插槽，请始终为所有的插槽使用完整的基于<template> 的语法

动态插槽名

2.6.0 新增


<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

本文系转载，前往查看

如有侵权，请联系?cloudcommunity@tencent.com 删除。

本文系转载，前往查看

如有侵权，请联系?cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度