组件间事件通信：Vue 3 中父子组件交互的艺术

2023-12-20 18:57:36

导言

在 Vue 生态系统中，组件化编程是构建复杂应用程序的关键范式。组件封装了可重用的逻辑和 UI 元素，使开发者能够以模块化的方式组织和管理代码。父子组件关系是组件体系结构中的常见模式，它允许子组件访问父组件的数据和方法，从而实现数据和功能的传递。

事件通信：父子组件间的桥梁

事件通信是实现父子组件交互的主要机制。它允许子组件触发事件，这些事件会被父组件侦听和处理，从而建立双向数据流和功能交互。Vue 3 中的事件通信基于 props 和 emit 机制。

1. Props：从父组件到子组件的数据传递

Props 是父子组件之间的数据桥梁，它允许父组件将数据传递给子组件。在父组件中，使用 props 选项定义要传递的数据：

<template>
  <MyChildComponent :message="greeting" />
</template>

<script>
export default {
  props: ['message']
}
</script>

在子组件中，使用 props 接收父组件传递的数据：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. Emit：从子组件到父组件的事件触发

Emit 是子组件触发事件的机制，这些事件会被父组件侦听和处理。在子组件中，使用 emit 方法触发事件：

<template>
  <button @click="greet">Say Hello</button>
</template>

<script>
export default {
  methods: {
    greet() {
      this.$emit('greeting', 'Hello from child!')
    }
  }
}
</script>

在父组件中，使用 v-on 侦听子组件触发的事件：

<template>
  <MyChildComponent @greeting="handleGreeting" />
</template>

<script>
export default {
  methods: {
    handleGreeting(greeting) {
      console.log(greeting) // 输出 "Hello from child!"
    }
  }
}
</script>