vue中的slot插槽

slot插槽的作用：

       为了让我们封装的组件更加具有扩展性

       让使用者可以决定组件内部的一些内容到底展示什么

---

slot插槽的简单使用：

    <div id='app'>
        <temp>
            <div>在组件中使用的插槽</div> <!-- 传递了插槽内容，显示 传递的内容：在组件中使用的插槽 -->
        </temp>
        <temp></temp> <!-- 没有传递插槽内容，显示 默认要展示的内容：西西 -->
        <temp>
            <h3>我是一只修行千年的狐</h3>
            <p>千年等待，千年孤独</p> <!-- 都会被插槽所替换掉 显示：我是一只修行千年的狐 千年等待，千年孤独 -->
        </temp>
    </div>

    <template id="temp">
        <div>
            <h2>哈哈</h2>
            <slot><span>西西</span></slot> <!-- 使用slot插槽进行站位 -->
        </div>
    </template>
    <script src=' https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                temp: {
                    template: '#temp'
                }
            }
        })
    </script>

所展示的界面效果：

---

 具名插槽的使用：

    <div id='app'>
        <temp>
            <button slot="left">返回</button>
            <span slot="center">标题</span>
        </temp>
    </div>

    <template id="temp">
        <div>
            <!-- 通过name指定一个名称，在需要使用的组件中使用slot进行绑定 -->
            <slot name="left">左边</slot>
            <slot name="center">中间</slot>
            <slot name="right">右边</slot>
        </div>
    </template>
    <script src=' https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                temp: {
                    template: '#temp'
                }
            }
        })
    </script>

所展示的界面效果：

---

slot作用域插槽： 父组件替换插槽的标签，但是内容由子组件来提供

    <div id='app'>
        <temp>
        </temp>
        <!-- 目的需求：获取子组件中的数据展示不同的风格 -->
        <temp>
            <!-- 通过slot-scope得到子组件的slot插槽对象 , 此时solt.data等于languages-->
            <template slot-scope="solt"><span>{{ solt.data.join('-') }}</span></template>
        </temp>
    </div>

    <template id="temp">
        <!-- 将languages数据通过slot插槽标签绑定出去 -->
        <div>
            <slot :data="languages">
                <ul>
                    <li v-for="item in languages">{{ item }}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script src=' https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                temp: {
                    template: '#temp',
                    data() {
                        return {
                            languages: ['JavaScript', 'C++', 'Java', 'Python', 'C#']
                        }
                    }
                }
            }
        })
    </script>

所展示的界面效果：