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域名插槽问题的更多相关文章

  1. Hybrid框架UI重构之路:六、前端那点事儿(Javascript)

    上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http:// ...

  2. Hybrid框架UI重构之路:五、前端那点事儿(HTML、CSS)

    上文回顾 :Hybird框架UI重构之路:四.分而治之 这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构 在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中 ...

  3. Hybrid框架UI重构之路:四、分而治之

    上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js. ...

  4. Hybrid框架UI重构之路:三、工欲善其事,必先利其器

    上文回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : ...

  5. Hybrid框架UI重构之路:二、事出有因

    上文回顾:Hybird框架UI重构之路:一.师其长技以自强 一切的重构都是有原因的,或许为了更快速度.更好体验.更快捷开发等,于是就有了自己的开发目标,简单看看未重构前UI("中国移动式&q ...

  6. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  7. Hybrid框架UI重构之路:一、师其长技以自强

    这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...

  8. Vue.js高仿饿了么WebApp

    介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图 项目预 ...

  9. RookeyFrame2.0发布,UI重构

    RookeyFrame2.0在原来1.0的基础上进行了UI的重构,设计了扁平化的样式风格,看起来更清爽,更赏心阅目,由于之前工作比较忙升级比较慢,后续会投入比较多时间来更新维护,同时针对二次开发项目做 ...

随机推荐

  1. 【坑】js语法中一些小细节 不注意也出坑 随笔记下 留待后查

    1.switch case内 区分数字 与 字符 ',bl; switch(+lv){ :bl = 1.7;break; :bl = 1.55;break; :bl = 1.4;break; ; } ...

  2. js语言评价--js 基于哈希表、原型链、作用域、属性类型可配置的多范式编程语言

    js 基于哈希表.原型链.作用域.属性类型可配置的多范式编程语言 值类型.引用类型.直接赋值: 原型是以对象形式存在的类型信息. ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值,对 ...

  3. abp radio表单元素 消失了

    框架将原本的元素都隐藏掉了,取而代之的是根据label定义了自己的样式,如下: [type="radio"]:not(:checked)+label {    padding-le ...

  4. 验证码破解 | Selenium模拟登陆微博

    模拟登陆微博相对来说,并不难.验证码是常规的5个随机数字字母的组合,识别起来也比较容易.主要是用到许多Selenium中的知识,如定位标签.输入信息.点击等.如对Selenium的使用并不熟悉,请先移 ...

  5. nginx 配置ssl

    单向SSL配置实例: server{ listen ssl; server_name www..com; root /data/wwwroot/www..com/ ; index index.html ...

  6. ModuleNotFoundError: No module named 'rest_framework_swagger'

    pip3.6 install django-rest-swagger

  7. ImportError: cannot import name 'BaseDataset' from 'src.dataset'

    因为我进行了相互调用,我在父类中调用了子类. from src.dataset import BaseDataset class PSINSDataset(BaseDataset): from src ...

  8. 【Gamma】Scrum Meeting 1

    目录 写在前面 gamma阶段角色更换 进度情况 任务进度表 Gamma阶段燃尽图 遇到的困难 照片 代码Commit记录 后端 前端 写在前面 例会时间:5.25 22:30-23:00 例会地点: ...

  9. 【Beta】Scrum Meeting 7 & 与助教谈话

    前言 Beta阶段第7次会议在5月12日22:00由PM在大运村一公寓三层召开, 时长30min. 任务分配 姓名 今日任务 明日任务 困难 周博闻 修复修改密码问题#54添加主页公告栏 #57(调整 ...

  10. ping某域名的整个流程

    实验环境:主机A,B(可不再同一网段),主机B有域名假设为www.baidu.com首先:1. 本地主机A在命令行下执行"ipconfig/flushdns"命令来清空本地DNS高 ...