Vue2.6 将 slot-scope 废弃了。
推荐使用 v-slot; 其使用方法大致如下:
注意多个插槽的情况下,最好都基于 <template>
default插槽用法还是一样的,v-slot主要针对的是具名插槽和作用域插槽;当然你也可以像这样将 default写出来
<template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template>
1.具名插槽: v-slot:slotName
<template v-slot:myslot>
显示内容
</template>
2.作用域插槽: v-slot:slotName="CustomName"
<template v-slot:mySlot="slotProps"> {{ slotProps.user.firstName }} </template>
//子组件
<template>
<div>
<p><slot name="mySlot" :user=‘user‘></slot></p>
</div>
</template>
这个slotProps不是固定的,你叫什么都行,因为它包含着子组件中暴露出来的属性
这样的赋值是可以通过ES6的解构得到属性的:即 3. 解构插槽: v-slot="{xxx,xxx,....}"
<template v-slot:mySlot="{user}">
{{ user }}
</template>
将视频中的slot-scope改写成 v-slot
<!-- ScrollNav插槽参数labels、current、txts;以作用域插槽使用 -->
<template v-slot:bar="props">
<cube-scroll-nav-bar
direction="vertical"
:labels="props.labels"
:txts="barTxts"
:current="props.current"
>
<!-- scrollNavBar插槽参数 txt、index、active、label;这里只用到txt-->
<template v-slot="{txt}">
<div class="text">
<support-ico
v-if="txt.type>=1"
:size=3
:type="txt.type"
></support-ico>
<span>{{txt.name}}</span>
<span class="num" v-if="txt.count">
<bubble :num="txt.count"></bubble>
</span>
</div>
</template>