slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
<children>
<span>我是父组件放在自组件中的,没有slot我不会显示</span>
</children>
</div> ... var vm = new Vue({
el: '#app',
components: {
children: {
template: "<button>我是一个没有slot的子组件模板</button>"
}
}
});

直接运行会输出如下:

这里并没有显示children组件中的span内容,如果想显示span怎么办?那就是使用在组件模板中使用slot进行span内容的一个分发:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
<children>
<span>我是父组件放在自组件中的,没有slot我不会显示</span>
</children>
</div> ... var vm = new Vue({
el: '#app',
components: {
children: {
template: "<button><slot></slot>我是一个没有slot的子组件模板</button>"
}
}
});

这回显示如下:

说明span的内容作为button的子标签已经显示ok,那么问题来了,如果我们有好几slot怎么办,父组件可能同时会在子组件中放置多个span标签,比如下面这种:

<div id="app">
<children>
<span>我是父组件放在自组件中的slot11111111111111</span>
<span>我是父组件放在自组件中的slot22222222222222</span>
</children>
</div>

在子组件中需要选择性的显示第一个span还是第二个span,怎么办?直接这样试试:

var vm = new Vue({
el: '#app',
components: {
children: {
template: "<button><slot></slot>我是一个没有slot的子组件模板<slot></slot></button>"
}
}
});

以上写法肯定是错误的,这样写的话相当于没有区分两个span,这样在slot分发的时候会将两个span标签内容当做一个标签合并插入2处slot位置那里,正确的做法是为slot指定name属性:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
<children>
<span slot="1">我是父组件放在自组件中的slot11111111111111</span>
<span slot="2">我是父组件放在自组件中的slot22222222222222</span>
</children>
</div> ... var vm = new Vue({
el: '#app',
components: {
children: {
template: "<button><slot name='1'></slot>我是一个没有slot的子组件模板<slot name='2'></slot></button>"
}
}
});

以上才可正确输出如下:

对于以下情景我们再测试下:

1、子组件模板中指定name属性的slot不存在:

<div id="app">
<children>
<span slot="3">我是父组件放在自组件中的slot11111111111111</span>
<span slot="2">我是父组件放在自组件中的slot22222222222222</span>
</children>
</div>
...
var vm = new Vue({
el: '#app',
components: {
children: {
template: "<button><slot name='1'></slot>我是一个没有slot的子组件模板</button>"
}
}
});

当在children内找不到匹配的slot时,相当于该slot无效,即以上两个span均不会显示:

2、子组件模板中指定name属性的slot存在,但是父组件注入的另一个slot没有使用的情况:

<div id="app">
<children>
<span slot="3">我是父组件放在自组件中的slot11111111111111</span>
<span slot="2">我是父组件放在自组件中的slot22222222222222</span>
</children>
</div>
...
var vm = new Vue({
el: '#app',
components: {
children: {
template: "<button><slot name='2'></slot>我是一个没有slot的子组件模板</button>"
}
}
});

同样地,相当于该具名slot没有生命而已,即slot等于3的span不会显示:

以上我们共使用了两种slot,没有指定name属性的slot为“单个slot”,指定了name属性的slot称作为“具名slot”,具名slot会查找相应的slot属性相同的父组件内容进行匹配

slot的差不多就这么多吧,后续看到了再补充。。。

关于vue.js中slot的理解的更多相关文章

  1. vue.js 中slot 用处大(转载)

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  2. Vue.js中 watch的理解以及深度监听

    如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...

  3. vue.js中$emit的理解

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  5. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  6. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  7. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  8. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  9. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

随机推荐

  1. IIS发布好的网页突然不显示图片了

    按以下步骤把地址加到ie的本地intranet就好了

  2. spring包下载方法

    http://blog.csdn.net/liangtiaoxian/article/details/52780747 https://jingyan.baidu.com/article/2fb0ba ...

  3. BZOJ 4719--天天爱跑步(LCA&差分)

    4719: [Noip2016]天天爱跑步 Time Limit: 40 Sec  Memory Limit: 512 MBSubmit: 1464  Solved: 490[Submit][Stat ...

  4. [ActionScript3.0] AS3利用ExternalInterface与js通信

    AS3代码,可做文档类; package { import flash.display.Sprite; import flash.events.*; import flash.external.Ext ...

  5. 在linux云服务器上运行Jar文件

    在linux服务器上运行Jar文件时通常的方法是: $ java -jar test.jar 这种方式特点是ssh窗口关闭时,程序中止运行.或者是运行时没法切出去执行其他任务,有没有办法让Jar在后台 ...

  6. 3.1 High Availability

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  7. 【JavaScript】__proto__和prototype的区别和联系【整理】

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } Chrome运行结果: 提示找不 ...

  8. mybatis的mapper.xml使用parameterType使用的报错

    错误在于一个写的get(Long id)的查询方法, 而在Mapper.xml中我定义了这个接收的参数的类型是int类型, 结果就报了如下的错误 org.mybatis.spring.MyBatisS ...

  9. js数字格式化为千分位

    方法1: 浏览器自带的一个方法 const num=12345.6789 num.toLocaleString();=>"12,345.679" 方法2: 正则匹配 func ...

  10. 微信 oauth 登录 ,回调两次,一个坑,记录一下。

    在做微信某个功能的时候,大致需求是:静默授权,得到openId ,然后拿着openId调用接口,判断是否关注.如果是关注的,则发放礼券.每个我网站的会员只会发放一次礼券.如果第二次则会提示已领取过礼券 ...