首先,在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot
指令)。它取代了 slot
和 slot-scope
这两个目前已被废弃但未被移除且仍在文档中的 attribute。
匿名插槽,具名插槽都好理解,作用域插槽看了文档,感觉还是有点晕,记录下。大概就是使用作用域插槽,父组件可以拿到子组件的数据并渲染。
为了让 user
在父级的插槽内容中可用,子组件可以将 user
在slot标签上绑定属性值,如:
<slot :user="'username'"></slot>
现在在父组件中,我们可以使用带值的 v-slot
来定义我们提供的插槽 prop 的名字:
<current-user>
<template v-slot:default="scope">
{{ scope.user}}
</template>
</current-user>
在这个例子中,我们选择将包含所有插槽 prop 的对象命名为 scope
,但你也可以使用任意你喜欢的名字。