vue 2.6.0 具名插槽, 作用域插槽

3次阅读

共计 462 个字符,预计需要花费 2 分钟才能阅读完成。

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 可以这样简写

正文完
 0