关于vue.js中slot的理解
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的理解的更多相关文章
- vue.js 中slot 用处大(转载)
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue.js中 watch的理解以及深度监听
如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...
- vue.js中$emit的理解
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
随机推荐
- php—Smarty-2
一.注释 *注释内容* Html注释显示客户端源文件中 Smarty注释不会发给客户端 Smarty的注释主要给模板设计者来看的 二.模板中的变量 l 由php文件分配 1) 普通变量 2) 数 ...
- IIS发布好的网页突然不显示图片了
按以下步骤把地址加到ie的本地intranet就好了
- 白帽hacker酷炫小技能大盘点!
白帽子是谁? 他们与一行行代码打交道,在“0”和“1”的世界中寻找风险,在IT产业软硬件核心技术和代码等自主研发能力不足.安全防护手段滞后.地下黑客业务已形成产业链的背景下,我国网络安全正面临日益严峻 ...
- Metasploit域渗透测试全程实录(终结篇)
本文作者:i春秋签约作家——shuteer 前言 内网渗透测试资料基本上都是很多大牛的文章告诉我们思路如何,但是对于我等小菜一直是云里雾里.于是使用什么样的工具才内网才能畅通无阻,成了大家一直以来的渴 ...
- (转)Javascript模块化编程(二):AMD规范
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- Tomcat启动和请求处理解析
tomcat是我们经常使用的组件,但是内部是如何运行的呢,我们去一探究竟. 1.tomcat架构 tomcat的整体架构图如下: Tomcat中只有一个Server,一个Server可以有多个Serv ...
- 安装php7
./configure --prefix=/usr/local/php7.1.5 --with-curl --with-iconv-dir --with-mysqli --with-openssl ...
- Python元类编程
来源:http://python.jobbole.com/88582/ @property装饰器,是将类中的函数当做属性调用 Python类中定义的属性,如果属性名前面只有一个下划线,那么就是一种规范 ...
- Vultr VPS建站攻略 – 一键安装宝塔面板架设LNMP/LAMP Web环境
我们选择VULTR VPS建站的还是比较多的,其主要原因在于商家的稳定,毕竟我们用来建站选择服务器价格考虑的不是主要的(当然VULTR价格也是比较便宜),最为主要的是因为VULTR商家比较稳定,而且多 ...
- docker阿里云镜像加速器使用
加速器使用:加快镜像下载速度 访问www.aliyun.com: 登录之后点击”控制台“,选择“产品与服务“: 选择“容器镜像服务“: 设定密码后选择“镜像加速器”: 这里会有一个加速器地址: 在 ...