Vue的插槽

• 插槽，用于将所携带的内容插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示是有父组件来控制的，而插槽在哪里显示就由子组件来进行控制。
• slot 标签是组件内部的占位符！用户可以使用自己的标记进行填充。
• 用户通过定义一个或多个标签，可将外部标记引入到组件的虚拟DOM中进行渲染，相当于“在此处渲染用户的标记”。
• 插槽有两种使用方式：默认插槽和具名插槽！

1、默认插槽

声明组件模板中包含一个插槽标签，然后使用组件时将组件内容部分填充到插槽中。

• 代码如下：

<div id="app">
        <div>
            <m-comp>编写内容发布</m-comp>
        </div>
    </div>

    <template id="mComp">
        <div>
            <h1>默认插槽</h1>
            <!-- 把 <m-comp> 内的内容放到这 <slot> 中显示 -->
            <slot></slot>
        </div>
    </template>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            components: {
                "m-comp": {
                    template: "#mComp"
                }
            }
        });
    </script>

效果图如下：

2、具名插槽

默认插槽只有一个，当需要使用多个插槽时，要使用具名插槽，即对插槽命名。

• 代码如下：

<div id="app">
        <div>
            <m-comp>
                <template slot="top">
                    <!-- 具名插槽【填充内容】 -->
                    <h2>插槽展示-头部</h2>
                </template>
                <h4 style="color: red;">插槽展示-内容</h4>
                <template slot="foot">
                    <!-- 具名插槽【填充内容】 -->
                    <h2>插槽展示-版权内容</h2>
                </template>
            </m-comp>
        </div>
    </div>

    <template id="mComp">
        <div>
            <!-- 具名插槽——头部 -->
            <slot name="top"></slot>
            <!-- 默认插槽 -->
            <slot></slot>
             <!-- 具名插槽——尾部 -->
             <slot name="foot"></slot>
        </div>
    </template>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            components: {
                "m-comp": {
                    template: "#mComp"
                }
            }
        });
    </script>

效果图如下：