使用slot（插槽）分发内容

什么是slot（插槽）

混合父组件的内容与自己的模板
将父组件的内容与子组件的内容像融合，从而弥补视图的不足

---

单个插槽

<div id="app">
        <child-component>
            <p>我是正室</p>
        </child-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child-component',{
            template: '<div>\
                            <slot>我是替补</slot>\
                        </div>'
        })
        var app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>

如果有p的内容，就不显示插槽的内容，如果没有就显示默认的内容

具名插槽
<p slot="命名">我是内容</p>
<slot name="命名"></slot>
把每个插槽进行命名，在组件上进行绑定

---

作用域插槽

作用域插槽是一种特俗的slot，使用一个可以复用的模板来替换已经渲染的元素---从子组件获取数据

<child-component>
        
            <!-- 必须有template模板，但是只会渲染内容，不会渲染模板。slot的命名,slot-scope等于一个自定义的命名 -->
            <template slot
            ="aaa" slot-scope="props">
                {{props.text}}
                {{props.val}}
                <!-- 除了name以外的都可以拿到 -->
            </template>
        </child-component>
<script>
            Vue.component('child-component',{
            template: '<div>\
                        <slot text="我是来自子组件的数据" name="aaa" val="ababab"></slot>\
                    </div>'
        })
            var app= new Vue({
                el: '#app'
            })
        </script>

在2.5.0后的版本可以不用template模板。直接使用需要的标签

---

访问slot
通过this.$slots.name拿到的是虚拟节点（是一个数组），拿到的节点取第0个，然后再获取innerText

所以通过this.$slots.name[0].elm.innerText就拿到了'我是标题'

---

动态组件
component,用来动态挂载不同的组件，使用is特性来实现的