Vue 3.0 中的slot及使用场景

1. 基本概念

在 Vue 中， slot 用于定义组件中的插槽位置，外部的内容会被插入到组件内部的这个位置。插槽的内容是动态的，可以根据需要进行传递和渲染。它允许开发者在组件外部传递任意内容，并在组件内部进行渲染，主要功能是提高组件的复用性和灵活性。

2. 使用方式

2.1. 默认插槽

最基本的插槽用法是默认插槽，在组件模板中定义 slot，在组件使用时传递内容。

子组件 MyComponent.vue

html 复制代码

<template>
    <div>
        <slot></slot>
    </div>
</template>

父组件

html 复制代码

<template>
    </Component>
    <p>This is some content passed to the slot.</p>
    </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
    components: {
        MyComponent
    }
};
</script>

2.2. 具名插槽

有时需要在一个组件中使用多个插槽，这时可以使用命名插槽。

子组件 MyComponent.vue

html 复制代码

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot> <!-- 默认插槽 -->
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

父组件

html 复制代码

<template>
    <MyComponent>
        <template v-slot:header>
            <h1>Header Content</h1>
        </template>
        <template v-slot:footer>
            <p>Footer Content</p>
        </template>
        <p>Main Content</p>
    </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
    components: {
        MyComponent
    }
};
</script>

2.3. 作用域插槽

作用域插槽允许子组件将数据传递给插槽内容的父组件，这在需要在插槽内容中使用子组件数据时非常有用。

子组件 MyComponent.vue

html 复制代码

<template>
    <div>
        <slot :user="user"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                name: 'John Doe',
                age: 30
            }
        };
    }
};
</script>

父组件

javascript 复制代码

<template>
    <MyComponent>
        <template v-slot:default="slotProps">
            <p>User Name: {{ slotProps.user.name }}</p>
            <p>User Age: {{ slotProps.user.age }}</p>
        </template>
    </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
    components: {
        MyComponent
    }
};
</script>

3. 使用场景

复用组件结构：插槽允许开发者在不同的上下文中复用相同的组件结构，而改变内容。比如模态框、卡片组件等。

动态内容插入：在一些布局组件中，可以通过插槽动态插入不同的内容，而不需要修改组件本身。

自定义渲染逻辑：在复杂组件中，通过作用域插槽可以将一些数据传递给父组件，从而让父组件来决定如何渲染这些数据。

嵌套组件：在多层嵌套组件中，插槽可以让外层组件将内容传递给内层组件，从而实现复杂的嵌套布局。