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

      <!-- 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>