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. keywordAsVar.php

    <?php //keywordAsVar.php #keywordAsVar.php $True="我是变量True"; echo($True); echo("&l ...

  2. Docker中Maven私服的搭建

    为何用到Maven私服? 在实际开发中,项目中可能会用到第三方的jar.内部通讯的服务接口都会打入到公司的私服中. 我们从项目实际开发来看: 一些无法从外部仓库下载的构件,例如内部的项目还能部署到私服 ...

  3. Likelihood function

    似然函数 统计学中,似然函数是一种关于统计模型参数的函数,表示模型参数中的似然性. 给定输出x时,关于参数θ的似然函数L(θ|x)(在数值上)等于给定参数θ后变量X的概率:L(θ|x)=P(X=x|θ ...

  4. MongoDB 部署复制集(副本集)

    部署MongoDB复制集(副本集)   环境 操作系统:Ubuntu 18.04 MongoDB: 4.0.3 服务器 首先部署3台服务器,1台主节点 + 2台从节点 3台服务器的内容ip分别是: 1 ...

  5. linux 配置启动supervisor详细

    参考自强学堂:https://code.ziqiangxuetang.com/django/django-nginx-deploy.html 例子中zqxt项目 安装 supervisor 软件包 ( ...

  6. Django 数据库与ORM

    一.数据库的配置 1 django默认支持sqlite,mysql, oracle,postgresql数据库.  <1> sqlite django默认使用sqlite的数据库,默认自带 ...

  7. ajax下post提交方式下载文件的处理(转)

    ajax是不能直接下载文件的,所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些不好看了, /*=================== ...

  8. zabbix监控ESXI主机

    ESXI6.0默认SSH关闭的,打开SSH的方法如下图: SSH打开后,主机会有警报,关闭警报的方法如下图 esxcli system  snmp  set  --communities  publi ...

  9. ubuntu之路——day17.4 卷积神经网络示例

    以上是一个识别手写数字的示例 在这个示例中使用了两个卷积-池化层,三个全连接层和最后的softmax输出层 一般而言,CNN的构成就是由数个卷积层紧跟池化层再加上数个全连接层和输出层来构建网络. 在上 ...

  10. Sonar错误 Invoke method(s) only conditionally

    sonarLint总是报错: Invoke method(s) only conditionally 代码如下: if(us != null){ logger.info("Log this: ...