二十三、Vue组件化开发-插槽的基本使用

什么是插槽

一句话，插槽就是提前预留位置，使用时将需要的东西填充进去。

举栗：笔记本电脑中预留了许多结构，如usb接口,typec接口等，当使用U盘时，直接把U盘插入到预留的接口中，而U就是所要插入的东西。

如在Laravel框架中，模板继承也是类似，@yield等都是预留接口，使用时填充需要填充的内容。

插槽的基本使用

<div id="app">
    <!--组件标签里面写入内容，就是为插槽填充内容-->
    <com1><p>我是文章内容1</p><span>作者：小白</span></com1>
    <com1><p>我是文章内容2</p></com1>
    <com1></com1>
</div>

<template id="demo">
    <div>
        <h3>插槽的基本使用</h3>
        <header>头部</header>
        <article>
            自定义文章内容
            <!--组件中预留一个插槽-->
            <slot></slot>
        </article>
        <footer>尾部</footer>
    </div>
</template>

<script>
    const com1 = {
        template:"#demo"
    };
    var app = new Vue({
        el:"#app",
        data:{},
        components:{com1}
    });
</script>

上述插槽的基本使用案例中，定义了一个插槽，com1组件复用了三次

1）三次复用中，可以为其写入不同的内容，但问题是，如果新增了一个插槽，如下

<article>
    自定义文章内容
    <!--组件中预留一个插槽-->
    <slot></slot>
    <slot></slot>
</article>

2）如<p>我是文章内容1</p>写入第一个插槽，<span>作者：小白</span>写入第个插槽，那么问题来了，插入的内容会重复2次，而非所想要的一个插槽占用一个内容。

3）使用具名插槽解决问题

具名插槽

什么是具名插槽？

具名插槽就是为插槽起一个名字。用到哪一个查到就指定哪一个插槽的名字。

<div id="app">
    <com1>
        <span slot="left">返回</span>
        <span slot="center">搜索</span>
        <span slot="right">扫一扫</span>
    </com1>
</div>

<template id="demo">
    <div>
        <h3>具名插槽的使用</h3>
        <slot name="left"><span>左</span></slot>
        <slot name="center"><span>中</span></slot>
        <slot name="right"><span>右</span></slot>
    </div>
</template>

<script>
    const com1 = {
        template:"#demo"
    };

    var app = new Vue({
        el:"#app",
        data:{},
        components:{
            com1
        }
    });
</script>

案例：每个插槽用于显示不同的内容。如name为left的插槽只显示与其有关的内容。