vue插槽slot使用

介绍

简单记录一下方便以后查看

官网介绍

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 引用官网上的图

也可以理解为内容填充或者是内容替换。替换掉子组件原来的内容，或填充原来的内容。 废话不多说，让我们直接开始，上代码。

slot用法

默认插槽

    //子组件
    <div class="tabs">
        <slot></slot>
    </div>

    //父组件
    <botton>
        我是底部
    </botton>

父组件里面直接写入的内容，会替换默认位置的内容

默认内容

    //子组件
    <div class="tabs">
        <slot>这里是默认的内容</slot>
    </div>

    //父组件
    <botton></botton>

在slot元素里写的内容是默认展示的内容。在父组件里没有影响子组件插槽时，显示默认内容

具名插槽

    //子组件
    <div class="tabs">
        <slot name="bottons">这里是默认的内容</slot>
    </div>

    //父组件
    写法一、
    <botton>
        <template v-slot:bottons>
            这里是替换内容
        </template>
    </botton>
    写法二、
    <botton>
        <template #bottons>
            这里是替换内容
        </template>
    </botton>

slot元素属性name，可以定义其名字。默认的插槽名字为default。 具名插槽顾名思义就是有名字的插槽，可以通过名字固定的找到哪一个插槽。#可以直接代替v-slot的写法

动态插槽名

    //父组件
    <botton>
        <template v-slot:[dynamicSlotName]>
            这里是替换内容
        </template>
    </botton>

dynamicSlotName可以是动态的。但必须是字符串，不然会触发警报！

作用域插槽

因为插槽没办法访问子组件的状态，还有一些场景下插槽需要使用父组件和子组件的内容。所以就有了作用域插槽 用法一。父组件插槽中用子组件的内容

    //子组件
    <div>
        <slot name="bottons" :age="10"></slot>
    </div>

    //父组件
    <botton>
          <template #bottons="slotProps"> 
            {{slotProps.age}}
          </template>
     </botton>

结果输出10 这样父组件插槽中用了子组件里的内容

用法二、解构用法

    //子组件
    <script setup>
        const props = defineProps({
                    titles: Array,
                })
    </script>
     <div class="list" v-for="(item,i) in titles" :key="i">
                <div>
                    <slot name="opaction" :item="item">
                        {{item.titse}}
                    </slot>
                </div>
            </div>

    <script setup>
        let arr =  [{titse:'这是标题3',count:3},{titse:'这是标题4',count:4}];
    </script>
    //父组件
    <titless :titles="arr">
          <template #opaction="{item}">
            {{ item.titse }}{{ item.count }}
          </template>
        </titless>

默认输出

    这是标题3
    这是标题4

替换输出

    这是标题33
    这是标题44

参考文档

vue官网