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

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理