031 V 了解slot内容分发
本帖最后由 不二如是 于 2018-10-25 15:38 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们通过v-model实现了组件通信，本次学习slot机制。
在开始前，我们随便看一个网页布局：
这个网页由一级导航，二级导航，轮播图，内容区，底部信息5个区域组成，如果要写成组件话。
基本样子：
<app>
<menu-main></menu-main>
<menu-sub></menu-sub>
<menu-bar></menu-bar>
<div class="container">
<container></container>
</div>
<app-footer></app-footer>
</app>
肯定会需要组件之间的相互组合，例如导航变化，内容区域也跟着变化。
上述过程就可以混合父组件的内容与子组件的模板，简称：内容分发（transclusion）。
那么就要用到slot了，以<app>为例，有两个显著的特点：
1、<app>组件不知道它的挂载点会有什么内容，挂载点的内容是由<app>的父组件决定。
2、<app>组件有可能有自己的模板。
结合之前学的props传递数据、events触发事件、slot内容分发就构成了Vue组件的3个API来源。
正式介绍slot之前，还需要了解一个概念，编译的作用域。
例如在父组件中有如下的模板：
<child-component>
{{message}}
</child-component>
这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件<child-component>的数据。
父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。
代码示例：
<div id="myApp">
<child-component v-show="showChild"></child-component>
</div>
<script>
Vue.component('child-component',{
templates:'<div>子组件</div>'
});
var app = new Vue({
el:'#myApp',
data:{
showChild:true
}
})
</script>
这里的showChild绑定的是父组件的数据，如果想在子组件上绑定，那应该是：
Vue.component('child-component',{
templates:'<div v-show="showChild">子组件</div>',
data:function(){
return{
showChild:true
}
}
});
var app = new Vue({
el:'#myApp'
})
因此，slot分发的内容，作用域是在父组件上的。
课后作业
1、Vue组件的3个API来源有什么？
2、下列代码中message绑定的是<child-componet>的数据（T/F）
<child-component>
{{message}}
</child-component>
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.props传递数据，events触发事件，slot内容分发
2.F 0
页:
[1]