031 V 了解slot内容分发

不二如是

                               
登录/注册后可看大图

上一讲我们通过v-model实现了组件通信，本次学习slot机制。

在开始前，我们随便看一个网页布局：

这个网页由一级导航，二级导航，轮播图，内容区，底部信息5个区域组成，如果要写成组件话。

基本样子：

1. <app>
   
2.     <menu-main></menu-main>
   
3.     <menu-sub></menu-sub>
   
4.     <menu-bar></menu-bar>
   
5.     <div class="container">
   
6.         <container></container>
   
7.     </div>
   
8.     <app-footer></app-footer>
   
9. </app>

复制代码

肯定会需要组件之间的相互组合，例如导航变化，内容区域也跟着变化。

上述过程就可以混合父组件的内容与子组件的模板，简称：内容分发（transclusion）。

那么就要用到slot了，以<app>为例，有两个显著的特点：

1、<app>组件不知道它的挂载点会有什么内容，挂载点的内容是由<app>的父组件决定。
2、<app>组件有可能有自己的模板。

结合之前学的props传递数据、events触发事件、slot内容分发就构成了Vue组件的3个API来源。

正式介绍slot之前，还需要了解一个概念，编译的作用域。

例如在父组件中有如下的模板：

1. <child-component>
   
2.     {{message}}
   
3. </child-component>

复制代码

这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件<child-component>的数据。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。

代码示例：

1. <div id="myApp">
   
2.     <child-component v-show="showChild"></child-component>
   
3. </div>
   
4. 
   
5. <script>
   
6.     Vue.component('child-component',{
   
7.        templates:'<div>子组件</div>'
   
8.     });
   
9. 
   
10.     var app = new Vue({
    
11.         el:'#myApp',
    
12.         data:{
    
13.             showChild:true
    
14.         }
    
15.     })
    
16. </script>

复制代码

这里的showChild绑定的是父组件的数据，如果想在子组件上绑定，那应该是：

1.    Vue.component('child-component',{
   
2.        templates:'<div v-show="showChild">子组件</div>',
   
3.         data:function(){
   
4.            return{
   
5.                showChild:true
   
6.            }
   
7.         }
   
8.     });
   
9. 
   
10.     var app = new Vue({
    
11.         el:'#myApp'
    
12.     })

复制代码

因此，slot分发的内容，作用域是在父组件上的。

---

课后作业


1、Vue组件的3个API来源有什么？

2、下列代码中message绑定的是<child-componet>的数据（T/F）

1. <child-component>
   
2.     {{message}}
   
3. </child-component>

复制代码

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.props传递数据，events触发事件，slot内容分发
2.F

一笙彤

0