Vue3：父传子与子传父的全面解读

Vue 3 中父组件与子组件通信：深入探讨 Slot 和 Emit

前言

Vue 3 中，组件通信的方式与 Vue 2 时代大不相同。本博客文章将深入探讨 Slot 和 Emit 两种核心机制，它们在父组件和子组件之间的双向通信中扮演着至关重要的角色。

Slot：父组件向子组件传递数据

Slot 允许父组件向子组件传递自定义数据，如同一个动态模板。父组件使用 <slot> 标签包裹要传递的数据，而子组件则使用 #slots 属性接收这些数据。

<!-- 父组件 -->
<Child>
  <template #default>
    我是父组件传递的数据
  </template>
</Child>

<!-- 子组件 -->
<template>
  <div>
    <slot />
  </div>
</template>

<script>
export default {
  setup(props, context) {
    const slots = context.slots;
    console.log(slots.default()); // 输出: "我是父组件传递的数据"
  }
};
</script>

Emit：子组件向父组件传递数据

Emit 允许子组件向父组件触发自定义事件，从而将数据从子组件传递给父组件。子组件使用 this.$emit 触发事件，父组件则使用 #emit 从上下文获取 emit 方法，用于监听这些事件。

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', '我是子组件传递的数据');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <Child @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: { Child },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出: "我是子组件传递的数据"
    }
  }
};
</script>

Slot 和 Emit 的优势

与 Vue 2 中的 Prop 和 Event 相比，Slot 和 Emit 具有以下优势：

• 更灵活： Slot 允许传递任何类型的数据，包括 HTML 片段和动态内容。
• 更强大： Emit 允许子组件向父组件传递任意数量的事件，并附带任意数据。
• 更解耦： Slot 和 Emit 将父组件和子组件解耦，提高了组件的重用性和可维护性。

何时使用 Slot 和 Emit

一般来说，使用 Slot 的最佳场景是：

• 父组件需要向子组件传递自定义模板或内容。
• 子组件需要渲染父组件提供的动态数据。

使用 Emit 的最佳场景是：

• 子组件需要向父组件触发自定义事件，并传递特定数据。
• 父组件需要监听子组件的事件并做出响应。

结论

Slot 和 Emit 是 Vue 3 中实现组件通信的强大机制，它们提供了一种灵活且强大的方式在父组件和子组件之间传递数据。理解和掌握这些机制对于构建可维护且响应迅速的 Vue 3 应用程序至关重要。

常见问题解答

1. Slot 和 Prop 之间有什么区别？
   Slot 是从父组件向子组件传递数据的机制，而 Prop 是从子组件向父组件传递数据的机制。

2. Emit 和 Event 之间有什么区别？
   Emit 是子组件触发自定义事件的机制，而 Event 是父组件监听子组件事件的机制。

3. Slot 可以传递复杂的数据结构吗？
   是的，Slot 可以传递任何类型的数据，包括复杂的对象和数组。

4. Emit 可以传递任意数量的参数吗？
   是的，Emit 可以传递任意数量的参数，使子组件能够灵活地传递数据。

5. Slot 和 Emit 是否与 Vue 2 中的 Prop 和 Event 完全不同？
   是的，Slot 和 Emit 的设计完全不同于 Vue 2 中的 Prop 和 Event，它们提供了更强大和灵活的通信机制。