Vue（六）插槽（2.6.0+）

插槽在vue2.6.0开始有了新的更新

具名插槽（数据来自父组件）

子组件（定义插槽）这里版本前后没什么变化

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "BaseLayout"
    }
</script>

父组件（使用）这里版本后废弃了slot="header"这样的写法，在vue3.0后直接移除。取而代之的是v-slot:插槽名称的写法，默认插槽（没有名字，默认为default），缩写为#header

<template>
    <base-layout>
        <template v-slot:header>
            <h1>Header</h1>
        </template>

        <template v-slot:default>
            <p>Main</p>
        </template>

        <template v-slot:footer>
            <p>Footer</p>
        </template>
    </base-layout>
</template>
<script>
    import BaseLayout from "../components/BaseLayout";
    export default {
        components: {BaseLayout}
    }
</script>

使用缩写#的代码

<template>
    <base-layout>
        <template #header>
            <h1>Header</h1>
        </template>

        <template #default>
            <p>Main</p>
        </template>

        <template #footer>
            <p>Footer</p>
        </template>
    </base-layout>
</template>
<script>
    import BaseLayout from "../components/BaseLayout";
    export default {
        components: {BaseLayout}
    }
</script>

页面

作用域插槽（数据来自子组件）

子组件（定义了数据并且将数据绑定到特定属性[user]上）

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <!--绑定在 <slot> 元素上的特性被称为插槽 prop-->
            <slot :user="userData">
                {{userData.lastName}}
            </slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "BaseLayout",
        data: () => ({
            userData: {
                firstName: 'AAA',
                lastName: 'Miss'
            }
        })
    }
</script>

父组件（给 v-slot 带一个值来定义我们提供的插槽 prop 的名字[slotProps]）

<template>
    <base-layout>
        <template #header>
            <h1>Header</h1>
        </template>
        <!--slotProps可以使任意名字-->
        <template #default="slotProps">
            <strong style="color: crimson">{{slotProps.user.firstName}}</strong>
        </template>

        <template #footer>
            <p>Footer</p>
        </template>
    </base-layout>
</template>
<script>
    import BaseLayout from "../components/BaseLayout";
    export default {
        components: {BaseLayout}
    }
</script>

数据关系：

页面：

以上代码的意思是，本来这里的后备内容是显示lastName的，我们可以在父组件那里做手脚，让后备内容显示的是firstName。但是无论怎么做，数据都是来自子组件。

将父组件的指定的后备内容注释掉即可显示原生的内容，如下：

 

页面：

其它

对于默认插槽，我们可以变成更加简洁的写法：

<template v-slot:default="slotProps">
    <strong style="color: crimson">{{slotProps.user.firstName}}</strong>
</template>

变成（不带参数的 v-slot 被假定对应默认插槽）

<template v-slot="slotProps">
    <strong style="color: crimson">{{slotProps.user.firstName}}</strong>
</template>

对于缩写 #，有限制条件，那就是只能有参数名的情况下才能使用，即：#header=“”。而不带的话会报错，即：#=“”