Vue中的slot

931 阅读2分钟

slot即“插槽”,插槽会在子组件需要的位置插入需要的内容,插槽的显示和内容等均由父组件控制。slot非常实用,它使vue中父子组件代码更加灵活,在很多使用场景下都能发挥不错的效果。

使用方法

默认使用

先看示例:

这是子组件

    <template id="son">
        <div>
            <h2>我是儿子</h2>
            <slot></slot>
        </div>
    </template>
这是父组件

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <p>插槽</p>
        </son>
    </div>

最后的显示效果为:

插槽可以理解为提前在子组件中挖个坑,然后通过父组件对填入坑的内容物进行相关配置与控制,使其显示我们需要的结果。

具名插槽

顾名思义,具名插槽即有名字的slot,具名插槽让子组件可以高度定制化,它使得可以在子组件中加入多个slot并且能够重复调用。

还是看示例:

这是子组件

<template id="son">
        <div>
            <h2>我是儿子</h2>
            <slot name="a"></slot>
            <slot name="b"></slot>
            <slot name="a"></slot>
        </div>
</template>
<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <p slot="a">a</p>
            <p slot="b">b</p>
        </son>
</div>

运行结果是这样:

插槽依据名字填入内容物,使用起来非常方便灵活:

作用域插槽

作用域插槽可以在插槽上携带数据,看示例比较好理解:

这是子组件

    <template id="son">
        <div>
            <h2>我是儿子</h2>
            <slot :data="num"></slot>
        </div>
    </template>
子组件中有一些数据

let son = {
        template: "#son",
        props: {
            fatherstr: {
                type: Number
            }
        },
        data() {
            return {
                num: [1, 2, 3]
            }
        },
    }
这是父组件

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <div slot-scope="num">
                <div v-for="i in num.data">
                    {{i}}
                </div>
            </div>
        </son>
    </div>

运行效果这样:

结束

本文是学习过程中的小小总结,希望有所帮助。