vue 2.6.0后将已废弃的使用 slot-scope 特性的语法废除,可是目前还可以使用,
连接地址:https://cn.vuejs.org/v2/guide...
如图实现一个相似,星级点评的组件html
父组件:vue
子组件:ide
子组件将 star绑定再传给父组件的 v-slot="slotProps",再经过slotProps.star得到传过来的值,
<template v-slot="soltProps">函数
<i :class="[soltProps.star ? on : off]"></i>
</template>
官方解释:
做用域插槽的内部工做原理是将你的插槽内容包括在一个传入单个参数的函数里:ui
function (slotProps) {
// 插槽内容
}
我的理解为这里是一个对象即{star: value(值)}, slotProps为该对象,
具名插槽:
父组件
<template v-slot:"header">spa
<i>具名插槽</i>
</template>
子组件:
<slot name="header"></slot>
其中v-slot:#header能够这样简写code