slot 插槽

什么是solt(插槽)？

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发，Vue.js 实现了一个内容分发 API ，使用特殊的 slot 元素作为原始内容的插槽。

插槽的作用

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

单个插槽的用法：

        <div id="app">
            <my-component>
                <p>这里是父组件的作用域</p>
                //这里父组件的作用域，如果直接在这里写一个 p 标签，那么将无法显示
                //此时就需要用到 slot 插槽 
                //如果这里有内容，就会替换掉子组件模板中slot中的内容。
                //如果这里没有内容，就显示slot中的内容
            </my-component>
        </div>


        <script>
            Vue.component('my-component', {
                template: `<div>
                        <slot>
                            如果父组件没有插入内容，我就作为默认内容
                        </slot>
                    </div>`,
                data() {
                    return {

                    }
                }
            })

            let app = new Vue({
                el: '#app',
                data: {

                },
            })
        </script>

具名插槽的用法：

根据不同的视图不同的div指定要使用哪个插槽

    <div id="app">
        <name-component>
            <h3 slot="header">我是标题</h3>
            <p>我是内容1</p>
            <p>我是内容2</p>
            <p slot="footer">我是内容3</p>
        </name-component>
    </div>


    <script>
        Vue.component('name-component', {
            template: `<div>
                <div class="header">
                        <slot name="header">

                        </slot>
                </div>
                <div class="main">
                        <slot>

                        </slot>
                </div>
                <div class="footer">
                        <slot name="footer">

                        </slot>
                </div>
            </div>`,
        })

        let app = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>

作用域插槽

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

第一步：在子组件中定义一个 slot ，在 slot 中写上传递的数据
第二步：在template 模板中定义一个 slot-scope = "自定义一个变量"
第三步：在template模板中以文本插值的形式，使用自定义的变量名.要拿到的数据所在的属性

<div id="app">
            <my-component>
                <!-- 这里是第二步 -->
                <template slot="abc" slot-scope="prop">
                    <!-- 这里是第三步 -->
                    {{prop.text}}
                </template><!-- template是不会被渲染出来的 -->
            </my-component>

        </div>


        <script>
            Vue.component('my-component', {
                template: `<div>
                        <slot text="我是来自子组件的数据" name="abc"> 
                        </slot>
                    </div>`,
                //这里是第一步
            })


在 vue.js 2.5.0 之前，slot="abc" slot-scope="prop"必须要写在 template中，
    template不会被渲染出来。
在 vue.js 2.5.0 之后，就可以写在任意标签上，并且该标签会渲染

访问 slot

            mounted() {
                //访问插槽  this.$slots.插槽名称
                let header = this.$slots.header
                let text = header[0].elm.innerText
                console.log(header)
                console.log(text)
            }

组件高级用----动态组件

Vue 给我们提供了一个元素叫做 component
作用：用来动态的挂载不同的组件
实现：使用 is 特性来进行实现的

//点击按钮切换不同的组件
   <div id="app">
        <component :is="thisView"></component>
        <button @click="changeView('A')">第一句</button>
        <button @click="changeView('B')">第二句</button>
        <button @click="changeView('C')">第三句</button>
        <button @click="changeView('D')">第四句</button>
    </div>

    <script>
        Vue.component('compA', {
            template: '<div>离离原上草</div>'
        })
        Vue.component('compB', {
            template: '<div>一岁一枯荣</div>'
        })
        Vue.component('compC', {
            template: '<div>野火烧不尽</div>'
        })
        Vue.component('compD', {
            template: '<div>春风吹又生</div>'
        })


        let app = new Vue({
            el: '#app',
            data: {
                thisView: 'compA'
            },
            methods: {
                changeView(tag) {
                    this.thisView = 'comp' + tag
                }
            }
        })
    </script>