vue2知识点：组件插槽分发

3.14插槽分发

父子组件使用时,有时需要将父元素的模板跟子元素模板进行混合,这时就要用到slot插槽进行内容分发, 简单理解就是在子模板定义中先占个位置等待父组件调用时进行模板插入。

3.14.1slot插槽

注意：在子组件模板定义中使用标签定义插槽位置，标签中可以填写内容，当父组件调用子组件且不传入内容时显示此标签体中内容，当父组件在引用子组件时，标签中的内容会放在子组件的插槽中。

举例

完整代码：

<div id="app">
    <!-- 传入数据 -->
    <child :msg="msgText">
        <!-- 传入模板,混合子模板 -->
        <h4>父组件模板</h4>
        <h5>模板混入....</h5>
    </child>
</div>

<template id="child-template">
    <div>
        <div>我是子组件</div>
        <div>{{msg}}</div>
        <!-- 定义slot插槽进行占位 -->
        <slot>我是默认内容,父组件不传入时我显示</slot>
    </div>
</template>
<script>
    Vue.component('child', {
        template:'#child-template',
        props:['msg']
    });
    var app = new Vue({
        el:'#app',
        data:{
            msgText:'父组件数据'
        }
    });
</script>

结果展示

3.14.2具名插槽

具名插槽slot, 就是给插槽起个名字。在子组件定义时可以定义多个插槽,同时通过name属性指定一个名字就可实现匹配,如:，父组件引用时使用< slot=‘header’>进行匹配插槽插入元素。

注意点1：子组件模板定义了两个插槽header和footer，分别使用name属性进行名称的指定，父组件引用子组件的标签中通过slot属性，来确定内容需要分发到哪个插槽里面。

大白话讲：slot标签通过配置name="header"名字，而父组件引用子组件的待传入标签通过配置slot="header"进行匹配插槽位置。

举例

完整代码：

<div id="app">
    <!-- 传入数据 -->
    <child :msg="msgText">
        <!-- 传入模板,混合子模板 -->
        <h4 slot="header">头部</h4>
        <h4 slot="footer">底部</h4>
    </child>
</div>

<template id="child-template">
    <div>
        <!-- 插槽header -->
        <slot name="header"></slot>
        <div>我是子组件</div>
        <div>{{msg}}</div>
        <!-- 插槽footer -->
        <slot name="footer"></slot>
    </div>
</template>
<script>
    Vue.component('child', {
        template:'#child-template',
        props:['msg']
    });
    var app = new Vue({
        el:'#app',
        data:{
            msgText:'父组件数据'
        }
    });
</script>

结果展示

3.14.3作用域插槽slot-scope

作用域插槽slot-scope，父组件通过插槽混入子组件的内容, 子组件也可以通过slot作用域向插槽slot内部传入数据，使用方式:，父组件通过