slot内容分发
vue实现了一套内容分发的API，这套API基于当前的web components规范草案，将<slot>元素作为承载分发内容的出口。
在前面的父子组件中，我们提到过，在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的。所以子组件的内容应当写在子组件里面，父组件的内容应该写在父组件里面，下面的这种情况。父组件的内容将会被默认丢弃。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<div class="parent">
<p>父组件</p>
<bbb>
<p>测试内容1</p>
<p>测试内容2</p>
<p>测试内容3</p>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<p>子组件</p>
</div>
`,
}
}
}
}
});
</script>
</body>
</html>
此时，如果我们希望上面的内容不被丢弃，就需要使用到一个特殊的<slot>元素作为元素内容的插槽。
匿名slot
当子组件模板中只有一个没有属性的slot时，父组件整个的内容都将插入到slot所在的位置，直接替换掉slot标签。需要注意的是，匿名slot最多只能有一个，多个匿名slot会导致程序报错。
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<div class="parent">
<p>父组件</p>
<bbb>
<p>测试内容1</p>
<p>测试内容2</p>
<p>测试内容3</p>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<p>子组件</p>
<slot></slot>
</div>
`,
}
}
}
}
});
</script>
我们可以在slot标签中添加任何内容作为默认值，在上面我们说的是，父组件的整个内容会替换到slot，所以，如果父组件中是有需要插入的内容是，这些默认值会随着slot被替换而替换掉，只有当父组件里面没有内容时，才会显示这些默认值。
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<div class="parent">
<p>父组件</p>
<bbb></bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<p>子组件</p>
<slot><div>我是默认值</div></slot>
</div>
`,
}
}
}
}
});
</script>
实名slot
有匿名slot，自然就像到了不是匿名的slot，这一类slot可以用一个特殊的属性name来配置内容分发，根据name来匹配内容片段中有对应slot特性的元素。可以有多个不同名字的slot同时存在，并且此时也可以有一个匿名slot，作为找不到匹配的内容片段的备用插槽。
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<div class="parent">
<p>父组件</p>
<bbb>
<p slot="my-header">我是头部</p>
<p slot="my-footer">我是尾部</p>
<p>我是主体1</p>
<p>我是主体2</p>
<p>我是主体3</p>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<p>子组件</p>
<slot name="my-header">头部默认值</slot>
<slot name="my-body">主体默认值</slot>
<slot name="my-footer">尾部默认值</slot>
<slot></slot>
</div>
`,
}
}
}
}
});
</script>
我们来分析一下上面代码的执行过程。
- 首先是名字为"my-header"的slot在父组件中寻找对应的slot，即<p slot="my-header">我是头部</p>并进行渲染。
- 接着是名字为"my-body"的slot在父组件中寻找对应的slot，并没有找到，所以显示的是自己的默认值。
- 然后是名字为"my-footer"的slot在父组件中寻找，同第一步一样。
- 此时，所有实名的slot都已经寻找完了，如果没有匿名slot，那么父组件中剩余没有匹配的内容都会被丢弃，但这个里面是有一个匿名slot的，所以它会寻找到父组件中所有不带slot属性的元素，然后替换自己，进行渲染。
- 最后，在父组件中还有一个有slot属性却没有匹配的slot的元素，将会被丢弃。
在上面的例子中，当我们将最后的匿名slot删除，那么所有没有slot属性的元素也都会被丢弃。
组件列表
slot还能被用作一个可以重复使用的模板来渲染列表，此时需要在子组件中将数据传递到slot插槽中，然后在父组件中使用带scope的<template>元素作为模板，其中的scope则是被用来接收从子组件中传递过来的数据，然后就可以实现循环渲染列表了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<div class="parent">
<p>父组件</p>
<bbb>
<template slot="item" scope="props">
<li>{{ props.text }}</li>
</template>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<ul>
<slot name="item" v-for="item in items" :text="item.text">默认值</slot>
</ul>
`,
data(){
return{
items:[
{id:1,text:'苹果'},
{id:2,text:'香蕉'},
{id:3,text:'葡萄'},
]
}
}
}
}
}
}
});
</script>
</body>
</html>
slot内容分发的更多相关文章
- Vue中slot内容分发
<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...
- vue slot内容分发
当需要让组件组合使用,混合父组件的内容和子组件的模板的时候,就会用到slot.这个过程就叫内容分发. 最为常用的是两种slot:一种是匿名slot, 一种是具名slot. 匿名 很好理解: 就是默认, ...
- 玩转vue的slot内容分发
vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会 ...
- Vue中的slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- Vuejs——（11）组件——slot内容分发
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- Vuejs——slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下父组件在子组件内套的内容,是不显示的. 例如代 ...
- vue2.0 之 slot 内容分发
前提:父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.被分发的内容会在父作用域内编译. 一.单个插槽 // 子组件模板 child-component <div> ...
- Vue内容分发slot
前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web ...
- Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
随机推荐
- 51Nod 1135：元根（数论）
1135 原根 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 设m是正整数,a是整数,若a模m的阶等于φ(m),则称a为模m的一个原根.(其中φ(m) ...
- iptables filter表 案例、iptables nat表的路由功能 、端口映射
1.小案例 #!/bin/bashipt="/usr/sbin/iptables"$ipt -F$ipt -P INPUT DROP$ipt -P OUTPUT ACCEPT$ip ...
- R49 A-D D图有向有环图
A. Palindromic Twist 给一个字符串(小写字母) 每个字符+1,-1:变成其他字符 a只能变b z只能变y 看能否变成回文字符串 #include<bits/stdc+ ...
- 《DSP using MATLAB》Problem 5.36
第1小题 代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- itcast-spring
黑马2014 spring后期 ssh整合后期 讲解不清楚 源码讲解太多 spring重新开始 itcast2016版本 介绍 Spring搭建 约束引入注意事项 导入至eclipse:wi ...
- spring获取jdbc链接底层原理
获取连接池的连接二种逻辑 1.一个事务中,一个连接 (底层逻辑:threadlocal存储 里面是map: key是数据源,value:链接) map存储应该是为多数据源使用的2.没有事务的serv ...
- MySQL导出用户权限
在MySQL 5.5/5.6版本中,使用SHOW GRANTS命令可以导出用户的创建脚本和授权脚本. hostname='127.0.0.1' port= username='root' passwo ...
- uname command
The command uname helps us in development special in scripts, see help of the uname uname --help Usa ...
- Nginx可以做什么？看完这篇你就懂了
本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解到过得,欢迎留言交流. Nginx能做什么 —— ...
- 当 1117 遇到 MLCC 后
当 1117 遇到 MLCC 后 AMS1117 很多人用过吧,但是当大容量的 MLCC 时会出现什么呢? 会出现问题,而且严重的问题,输出纹波会变大,会自激,会有声音出来. 这是很多工程师没有注意的 ...