vue 2.6.0后将已废弃的使用 slot-scope 特性的语法废除,但是目前还能够使用,
链接地址:https://cn.vuejs.org/v2/guide...
如图实现一个类似,星级点评的组件
父组件:
子组件:
子组件将 star绑定再传给父组件的 v-slot="slotProps",再通过slotProps.star获得传过来的值,
<template v-slot="soltProps">
<i :class="[soltProps.star ? on : off]"></i>
</template>
官方解释:
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里:
function (slotProps) {
// 插槽内容
}
个人理解为这里是一个对象即{star: value(值)}, slotProps为该对象,
具名插槽:
父组件
<template v-slot:"header">
<i>具名插槽</i>
</template>
子组件:
<slot name="header"></slot>
其中v-slot:#header可以这样简写
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。