揭秘Vue3：组件通信与插槽的高效运用技巧，解锁实战秘籍

引言

Vue3作为新一代的前端框架，相较于Vue2，在组件通信和插槽的运用上有了显著的改进。本文将深入探讨Vue3中组件通信与插槽的运用技巧，并通过实际案例帮助读者解锁实战秘籍。

组件通信

1. 事件总线（Event Bus）

在Vue2中，事件总线（Event Bus）是一种常用的组件通信方式。Vue3中，虽然不再推荐使用事件总线，但仍然可以使用。

// 创建一个空的Vue实例作为事件总线 const EventBus = new Vue(); // 发送事件 EventBus.$emit('custom-event', payload); // 监听事件 EventBus.$on('custom-event', (payload) => { // 处理事件 });

2. 依赖注入（Dependency Injection）

Vue3引入了依赖注入的概念，使得组件之间的通信变得更加简单。

// 父组件 const ParentComponent = { inject: ['customEvent'], mounted() { this.customEvent('custom-event', payload); } }; // 子组件 const ChildComponent = { inject: ['customEvent'], methods: { sendEvent() { this.customEvent('custom-event', payload); } } };

3. Provide / Inject

Provide / Inject是一种在组件树中跨级通信的方式。

// 祖先组件 const GrandparentComponent = { provide() { return { customEvent: this.customEvent }; }, methods: { customEvent(event, payload) { // 处理事件 } } }; // 孙子组件 const GrandchildComponent = { inject: ['customEvent'], mounted() { this.customEvent('custom-event', payload); } };

插槽（Slots）

1. 默认插槽

默认插槽是插槽最基本的形式，允许我们将内容插入到组件中。

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

2. 具名插槽

具名插槽允许我们指定将内容插入到组件的哪个部分。

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

3. 作用域插槽

作用域插槽允许我们将作用域内的数据传递给插槽内容。

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

实战案例

以下是一个简单的Vue3组件通信与插槽的实战案例：

<template> <ParentComponent> <template #header> <h1>欢迎来到Vue3世界</h1> </template> <template #footer> <p>版权所有 © 2021</p> </template> </ParentComponent> </template> <script> import ParentComponent from './ParentComponent.vue'; export default { components: { ParentComponent } }; </script>

<template> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> <script> export default { name: 'ParentComponent' }; </script>