插槽的基本使用和具名插槽（v-solt指令）

3月

本文最后更新于2020年03月21日，已经过了1706天没有更新，若内容或图片失效，请留言反馈

为什么使用插槽

用生活中的物品举例

生活中许多地方都有插槽，比如电脑的USB插槽，插线板的电源插槽。
插槽目的是让我们的设备具备更多的扩展性
比如电脑的USB可以接入手机、U盘、音箱、键盘、鼠标等

组件的插槽

组件的插槽也是为了让我们封装的组件更加具有扩展性
让使用者可以决定组件组件内部的内容

导航栏：

在开发中几乎每个页面都有导航栏
那么导航栏必然会封装成一个组件
我们可以在多个页面中使用这个组件

但是每个页面的导航栏都会一样吗？答案是否定的。

如何封装这类组件

抽取共性，保留不同

这类组件有很多区别，也有很多共性。上面说了封装的导航栏可以重复使用，但每个页面的导航栏可能是不同的，所以我们需要抽取共性，保留不同。
将共性抽取到组件中，将不同保留为插槽
一但我们预留了插槽，就可以让使用者跟自己的需求具决定插槽中的内容

预留插槽solt的基本使用

在组件的template模板中通过来预留插槽

text 代码:

    <template id="cpn">
        <div>
            <h2>this is components</h2>
            <!-- 预留插槽 -->
            <slot>
                <h2>默认显示的元素</h2>
            </slot>
        </div>
    </template>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    const app = new Vue({
        el:'#app',
        data:{
            
        },
        components:{
            cpn:{
                template:'#cpn',
            }
        }
    })
</script>

插槽中可以定义默认显示的内容，当使用则没有决定插槽的内容时会自动显示。

text 代码:

    <div id="app">
        <cpn></cpn>
    </div>

运行结果

this is components
这是默认显示的元素

当使用者决定了插槽内容时

text 代码:

    <div class="app">
        <cpn>
            <div>使用者决定的内容</div>
        </cpn>
    </div>

运行结果

this is components
使用者决定的内容

默认内容将不会显示

具名插槽的使用 v-solt

假定我们有三个插槽

text 代码:

    <template id="cpn">
        <div>
            <slot>
                <span>左边</span>
            </slot>

            <slot>
                <span>中间</span>
            </slot>

            <slot>
                <span>右边</span>
            </slot>
        </div>
    </template>

未定义插槽内容时

text 代码:

    <div class="app">
        <cpn></cpn>
    </div>

运行结果

左边中间右边

现在我们想要修改中间插槽的内容

text 代码:

    <div class="app">
        <cpn>修改的内容</cpn>
    </div>

运行结果

修改内容修改内容修改内容

三个插槽的内容全都被修改

这种情况下，需要使用具名插槽
为插槽添加一个name属性

text 代码:

    <template id="cpn">
        <div>
            <slot>
                <span>左边</span>
            </slot>

            <slot name="center">
                <span>中间</span>
            </slot>

            <slot>
                <span>右边</span>
            </slot>
        </div>
    </template>

现在修改中间的值：v-slot:插槽name属性的值

text 代码:

    <div class="app">
        <cpn>
            <template v-slot:center>
                修改后中间插槽的内容
            </template>
        </cpn>
    </div>

运行结果

左边修改后中间插槽的内容右边

也可以为所有插槽添加name属性

text 代码:

    <template id="cpn">
        <div>
            <slot name="left">
                <span>左边</span>
            </slot>

            <slot name="center">
                <span>中间</span>
            </slot>

            <slot name="right">
                <span>右边</span>
            </slot>
        </div>
    </template>

定义插槽内容

text 代码:

    <div class="app">
        <cpn>
            <template v-slot:center>
                修改后中间插槽的内容
            </template>
            
            <template v-slot:center>
                修改后左边插槽的内容
            </template>
            
            <template v-slot:center>
                修改后右边插槽的内容
            </template>
        </cpn>
    </div>

运行结果