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>