跨组件通信：揭秘 Vue3 子组件抛出事件（$emit）的多种妙用

跨组件通信是 Vue.js 应用程序开发中的重要一环，它使子组件能够与父组件进行交互，从而构建出复杂而响应迅速的应用程序。在 Vue3 中，跨组件通信主要通过 $emit 方法来实现，该方法允许子组件触发自定义事件，从而通知父组件发生了某个特定的动作或状态变化。

1. 在 setup() 中使用 $emit

在 Vue3 中，子组件可以通过 setup() 函数来管理其状态和行为。在 setup() 中，我们可以使用 $emit 方法来触发自定义事件。语法如下：

this.$emit('eventName', payload)

其中：

• eventName 是自定义事件的名称，它可以是任意字符串。
• payload 是要传递给父组件的数据，它可以是任何类型。

以下是一个示例，演示如何在 setup() 中使用 $emit 来触发一个名为 incrementCounter 的自定义事件：

import { ref } from 'vue'

export default {
  setup() {
    const counter = ref(0)

    const incrementCounter = () => {
      counter.value++
      this.$emit('incrementCounter', counter.value)
    }

    return {
      counter,
      incrementCounter
    }
  }
}

在父组件中，我们可以使用 @eventName 指令来监听子组件触发的自定义事件。语法如下：

<child-component @incrementCounter="handleIncrementCounter" />

其中：

• child-component 是子组件的名称。
• @incrementCounter 是要监听的自定义事件的名称。
• handleIncrementCounter 是当自定义事件触发时要执行的函数。

以下是一个示例，演示如何在父组件中使用 @eventName 指令来监听 incrementCounter 自定义事件：

<template>
  <child-component @incrementCounter="handleIncrementCounter" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },

  methods: {
    handleIncrementCounter(counter) {
      console.log(`The counter value is now ${counter}`)
    }
  }
}
</script>

2. 在