Vue学习笔记：组件内容分发（slot）

1、官网直达链接

2、 概述

在实际开发中，时长会把父组件与子组件自己的模版混合起来使用。而这样的一个过程在Vue中被称为内容分发 。
简单来说，假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示、不显示、显示在哪里、如何显示都是slot分发的结果。

3、用法

3.1 默认情况下

父组件在子组件内嵌套的内容是不显示（ul>li 数据未显示）

3.2多个插槽时

有些时候我们需要多个插槽
父组件在要分发的标签里添加 slot=”name名” 属性
子组件在对应分发的位置的slot标签里，添加name=”name名” 属性，
然后就会将对应的标签放在对应的位置了。

<div id="box">
    <aaa>
        <ul slot="ul-slot">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <ol slot="ol-slot">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </aaa>
    <hr>
    <aaa>
    </aaa>

</div>
<template id="aaa">
    <h1>XXX</h1>
    <slot name="ul-slot">这是默认的情况无序列表</slot>
    <slot name="ol-slot">这是默认的情况有序列表</slot>
    <p>welcome vue</p>
</template>
<script>
    var vm= new Vue({
        el:'#box',
        components:{
            'aaa':{
                template:'#aaa'
            }
        }
    })
</script>

---