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. php—Smarty-2

    一.注释 *注释内容* Html注释显示客户端源文件中 Smarty注释不会发给客户端 Smarty的注释主要给模板设计者来看的 二.模板中的变量 l  由php文件分配 1)  普通变量 2)  数 ...

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

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

  3. 白帽hacker酷炫小技能大盘点!

    白帽子是谁? 他们与一行行代码打交道,在“0”和“1”的世界中寻找风险,在IT产业软硬件核心技术和代码等自主研发能力不足.安全防护手段滞后.地下黑客业务已形成产业链的背景下,我国网络安全正面临日益严峻 ...

  4. Metasploit域渗透测试全程实录(终结篇)

    本文作者:i春秋签约作家——shuteer 前言 内网渗透测试资料基本上都是很多大牛的文章告诉我们思路如何,但是对于我等小菜一直是云里雾里.于是使用什么样的工具才内网才能畅通无阻,成了大家一直以来的渴 ...

  5. (转)Javascript模块化编程(二):AMD规范

    转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...

  6. Tomcat启动和请求处理解析

    tomcat是我们经常使用的组件,但是内部是如何运行的呢,我们去一探究竟. 1.tomcat架构 tomcat的整体架构图如下: Tomcat中只有一个Server,一个Server可以有多个Serv ...

  7. 安装php7

    ./configure  --prefix=/usr/local/php7.1.5 --with-curl --with-iconv-dir  --with-mysqli --with-openssl ...

  8. Python元类编程

    来源:http://python.jobbole.com/88582/ @property装饰器,是将类中的函数当做属性调用 Python类中定义的属性,如果属性名前面只有一个下划线,那么就是一种规范 ...

  9. Vultr VPS建站攻略 – 一键安装宝塔面板架设LNMP/LAMP Web环境

    我们选择VULTR VPS建站的还是比较多的,其主要原因在于商家的稳定,毕竟我们用来建站选择服务器价格考虑的不是主要的(当然VULTR价格也是比较便宜),最为主要的是因为VULTR商家比较稳定,而且多 ...

  10. docker阿里云镜像加速器使用

    加速器使用:加快镜像下载速度 访问www.aliyun.com: 登录之后点击”控制台“,选择“产品与服务“: 选择“容器镜像服务“: 设定密码后选择“镜像加速器”:  这里会有一个加速器地址:  在 ...