1

vue 2.6.0后将已废弃的使用 slot-scope 特性的语法废除,但是目前还能够使用,
链接地址:https://cn.vuejs.org/v2/guide...
如图实现一个类似,星级点评的组件

clipboard.png
父组件:

clipboard.png
子组件:

clipboard.png
子组件将 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可以这样简写


breathfish
43 声望2 粉丝