Vue 2.60 中, 插槽新增的v-slot

注意v-slot只能添加在<template>上(只有一种例外情况)，这一点和已经废弃的slotattribute不同。

作用域插槽

自 2.6.0 起有所更新。已废弃的使用slot-scopeattribute 的语法在这里。

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的<current-user>组件：

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

我们可能想换掉备用内容，用名而非姓来显示。如下：

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

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为slotProps，但你也可以使用任意你喜欢的名字。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8792