当需要组合组件，即混合父组件内容与子组件模板时，就需要用到 slot。
一个组件不管多么复杂，都是由以下三个部分组成的：
- props - 传递数据
- events - 触发事件
- slot - 分发内容
1 组件作用域
html：
<div id="app">
<child v-show="isShow"></child>
</div>
js：
Vue.component('child',{
template:'<div>子组件内容</div>'
});
var app = new Vue({
el: '#app',
data: {
isShow:true
}
});
这里的 isShow 绑定的是父组件的数据。
html：
<div id="app2">
<child2></child2>
</div>
js：
Vue.component('child2',{
template:'<div v-show="isShow">子组件 2 内容</div>',
data:function () {
return {
isShow:true
}
}
});
var app2 = new Vue({
el: '#app2',
data: {
}
});
这里定义在子组件模板中的 isShow 绑定的是子组件的数据。
所以说，组件模板中的内容是在当前组件的作用域内被编译的。
2 单个 slot
在子组件的模板定义中，加入 <slot> 元素就可以开启一个 slot。如果父组件模板中，没有在子组件标签内定义任何内容，那么就会显示之前在 <slot> 元素内定义的内容；如果子组件标签内定义了内容，那么就会显示这些内容。
html：
<div id="app3">
<child3>
<p>云计算推介会</p>
</child3>
</div>
js：
Vue.component('child3', {
template: '\
<div>\
<slot>\
<p>天上不见鸟，风吹石头跑，中国戈壁荒漠变身云基地</p>\
</slot>\
</div>\
'
});
var app3 = new Vue({
el: '#app3',
data: {}
});
效果：
云计算推介会
如果 html 中的 child3 内未定义任何内容，那么就会显示定义在 <slot> 元素中的内容 ：
<div id="app3">
<child3>
</child3>
</div>
效果：
天上不见鸟，风吹石头跑，中国戈壁荒漠变身云基地
注意： 子组件模板中的 <slot> 元素内定义的内容，它的作用域在子组件中。
3 命名 slot
我们可以给 slot 命名，来指定分发的内容。命名的 slot 可以与之前说的无命名的 slot 和谐共处。
html：
<div id="app4">
<child4>
<h2 slot="header">人工智能识别人体姿态的秘密</h2>
<p>人体姿态识别成为人工智能最新渗透的领域。据国外媒体报道，英国曼彻斯特大学和西班牙马德里大学的合作研究团队最新AI步态识别技术识别准确率高达93%，是目前AI步态识别的最高水平。日本电信公司NTT
East和科技公司Earth eye合作开发的AI
Guardsman系统则可以通过肢体动作识别，实时追踪顾客购物行为，帮助经营者及时发现商店中的小偷。瑞士洛桑联邦理工学院生物机器人实验室的步态识别系统可以精确计算走路时所消耗的卡路里，未来将搭载在一套可穿戴设备上，提醒用户调整最佳走路姿势，保护身体关节或更好地通过走路燃烧卡路里。</p>
<div slot="footer">Copyright © Deniro</div>
</child4>
</div>
js：
Vue.component('child4', {
template: '\
<div class="page">\
<div class="header">\
<slot name="header"></slot>\
<div class="main>">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>\
</div>\
'
});
var app4 = new Vue({
el: '#app4',
data: {}
});
渲染结果：
<div class="page">
<div class="header">
<h2>人工智能识别人体姿态的秘密</h2>
<div class="main>"> <p>人体姿态识别成为人工智能最新渗透的领域。据国外媒体报道，英国曼彻斯特大学和西班牙马德里大学的合作研究团队最新AI步态识别技术识别准确率高达93%，是目前AI步态识别的最高水平。日本电信公司NTT
East和科技公司Earth eye合作开发的AI
Guardsman系统则可以通过肢体动作识别，实时追踪顾客购物行为，帮助经营者及时发现商店中的小偷。瑞士洛桑联邦理工学院生物机器人实验室的步态识别系统可以精确计算走路时所消耗的卡路里，未来将搭载在一套可穿戴设备上，提醒用户调整最佳走路姿势，保护身体关节或更好地通过走路燃烧卡路里。</p> </div>
<div class="footer">
<div>Copyright © Deniro</div>
</div>
</div>
</div>
效果：
这个示例中的子组件，声明了三个 <slot> 元素，只有 <div class="main>"> 内的 <slot> 元素没有指定 name 属性，所以也只有它会被填充子组件在 HTML 中定义的默认内容。
4 作用域 slot
作用域 slot 的使用场景是这样的：既可以复用子组件的 slot，又可以扩展甚至改变 slot 中的内容。
html：
<div id="app5">
<child5>
<template scope="props">
<p>父组件定义的内容</p>
<p>{{props.content}}</p>
</template>
</child5>
</div>s
js：
Vue.component('child5', {
template: '\
<div class="child">\
<slot content="子组件定义的内容"></slot>\
</div>'
});
var app5 = new Vue({
el: '#app5',
data: {}
});
渲染结果：
<div id="app5">
<div class="child">
<p>父组件定义的内容</p>
<p>子组件定义的内容</p>
</div>
</div>
我们在子组件模板的 slot 内定义了一个 content，然后在父组件的 template 中，通过 scope 属性，将子组件中定义的 content 内容，传递过来。
5 访问 slot
我们可以通过 $slot 来访问被分发的内容。
html：
<div id="app6">
<child6>
<h2 slot="header">人工智能识别人体姿态的秘密</h2>
<p>人体姿态识别成为人工智能最新渗透的领域。据国外媒体报道，英国曼彻斯特大学和西班牙马德里大学的合作研究团队最新AI步态识别技术识别准确率高达93%，是目前AI步态识别的最高水平。日本电信公司NTT
East和科技公司Earth eye合作开发的AI
Guardsman系统则可以通过肢体动作识别，实时追踪顾客购物行为，帮助经营者及时发现商店中的小偷。瑞士洛桑联邦理工学院生物机器人实验室的步态识别系统可以精确计算走路时所消耗的卡路里，未来将搭载在一套可穿戴设备上，提醒用户调整最佳走路姿势，保护身体关节或更好地通过走路燃烧卡路里。</p>
<div slot="footer">Copyright © Deniro</div>
</child6>
</div>
js：
Vue.component('child6', {
template: '\
<div class="page">\
<div class="header">\
<slot name="header"></slot>\
<div class="main>">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>\
</div>',
mounted: function () {
var header = this.$slots.header;
console.log("header:" + header);
console.log("headerInnerHTML:" + header[0].elm.innerHTML);
var main=this.$slots.default;
console.log("main:" + main);
console.log("mainInnerHTML:" + main[1].elm.innerHTML);
}
});
var app6 = new Vue({
el: '#app6',
data: {}
});
输出结果：
一般在开发独立组件的过程中，会用到 slot 访问操作。
网友评论