031 V 了解slot内容分发

不二如是

                               
登录/注册后可看大图

上一讲我们通过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>

答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

Ruide

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

一笙彤

0