解构插槽 Prop

2022-05-28 17:32:10 浏览数 (2)

解构插槽 Prop

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

代码语言：javascript复制

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

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

代码语言：javascript复制


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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

代码语言：javascript复制


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

0 人点赞