Vue 3.0 中的slot及使用场景

1. 基本概念

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

2. 使用方式

2.1. 默认插槽

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

  1. 子组件 MyComponent.vue
html 复制代码
<template>
    <div>
        <slot></slot>
    </div>
</template>
  1. 父组件
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. 具名插槽

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

  1. 子组件 MyComponent.vue
html 复制代码
<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot> <!-- 默认插槽 -->
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
  1. 父组件
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. 作用域插槽

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

  1. 子组件 MyComponent.vue
html 复制代码
<template>
    <div>
        <slot :user="user"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                name: 'John Doe',
                age: 30
            }
        };
    }
};
</script>
  1. 父组件
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. 使用场景

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

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

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

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

相关推荐
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
aiguangyuan3 天前
前端开发 React 状态优化
系统架构·前端开发
aiguangyuan4 天前
React 项目性能瓶颈分析
系统架构·前端开发
Robbie丨Yang6 天前
近期工作感想:职业规划篇
html·css3·前端开发·工作·职业规划
白仑色7 天前
JavaScript 语言基础详解
开发语言·javascript·ecmascript·前端开发
白仑色10 天前
AJAX 入门到精通
前端·javascript·ajax·okhttp·web开发·前端开发
charlee4415 天前
WebGL简易教程——结语
教程·webgl·三维可视化·前端开发·计算机图形学
aiguangyuan1 个月前
React 动态路由的使用和实现原理
react·前端开发
aiguangyuan1 个月前
手写简版React-router
react·前端开发
aiguangyuan1 个月前
React-router实现原理剖析
react·前端开发