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>
 

 

 

 

 

 

 

 

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

上一篇:h5拉起手机摄像头拍照及选择图片并展示


下一篇:Angular 中使用第三方模块 axios 请求数据