当前位置：首页 > news >正文

Vue 3.0 中的slot及使用场景

news 来源：原创 2025/5/19 9:39:20

1. 基本概念

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

2. 使用方式

2.1. 默认插槽

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

1. 子组件 MyComponent.vue

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

2. 父组件

<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

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

2. 父组件

<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

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

2. 父组件

<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>