cube-ui 重构饿了吗Webapp的 scroll-nav域名插槽问题

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

<cube-scroll-nav-bar

direction="vertical"

:labels="props.labels"

:txts="barTxts"

:current="props.current"

<support-ico

v-if="txt.type>=1"

:size=3

:type="txt.type"

></support-ico>

</span>

</div>

</template>

原文地址：https://www.cnblogs.com/xuhua123/p/11928340.html