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 的理论之后,就开始自己利用业余时间做 ...
随机推荐
- SQLI DUMB SERIES-4
less4 输入单引号发现回显正常,说明单引号被过滤了,输入双引号: ?id=1" 说明输入的Id被一对双引号和圆括号包围,因此闭合双引号和圆括号就行,其他方法跟less1差不多 例如:un ...
- MyBatis like函数使用注意事项
百分号后面必须要加上空格,不然会将后面的字符串全部都黏在一起,导致sql语句运行报错
- day 0150面向对象-成员
一 类的成员 在类中定义的变量和方法都被称为成员 class Person: def __init__(self, name, num, gender, birthday): # 成员变量(实例变量) ...
- Blender 简单齿轮驱动
直入主题. 1. 用户设置里,勾选扩展网格(Add Mesh: Extra Objects):这样可以直接新增简单齿轮了,免得自己再造轮子. 2. 新增2个齿轮,12赤为主动轮,驱动24赤的被动轮: ...
- 《DSP using MATLAB》Problem 6.20
先放子函数: function [C, B, A, rM] = dir2fs_r(h, r); % DIRECT-form to Frequency Sampling form conversion ...
- -save和-save-dev 区别（转载）
本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时 ...
- datetime学习
四.datetime类 (一).datetime类的数据构成 datetime类其实是可以看做是date类和time类的合体,其大部分的方法和属性都继承于这二个类,相关的操作方法请参阅,本文上面关于二 ...
- Avoiding post increase or decrease
When we write a loop, most of us will use post increase or decrease, but there is a better solution. ...
- Android学习--------实现增删改查数据库操作以及实现相似微信好友对话管理操作
版权声明:本文为博主原创文章,转载请注明原文地址.谢谢~ https://blog.csdn.net/u011250851/article/details/26169409 近期的一个实验用到东西挺多 ...
- C#获取当前路径的七种方法 【转载】
//1.获取模块的完整路径. string path1 = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; // ...