Vue $emits()实现组件通信（附带实例）

除了父向子通信，Vue 中还存在逆向通信，即子向父通信。子向父通信可以利用自定义事件 emits 来实现，本节我们直接通过案例来讲解子向父通信的应用。

在子组件文件 HelloWorld.vue 中放置一个按钮，通过点击按钮实现父组件调用方法的操作。具体做法是，给按钮绑定点击事件 click，利用 $emit() 方法进行从下向上的事件发射。$emit() 方法可以接收多个参数，第 1 个参数是自定义事件的名称，剩余参数则是想要传递的参数。

将自定义事件命名为 increaseParentCount，参数设置为数值 2。此时 components/HelloWorld.vue 文件代码如下：

<template>
  <div>
    <button @click="$emit('increaseParentCount', 2)">直接触发自定义事件</button>
  </div>
</template>

在父组件中可以通过 v-on 指令监听事件。在父组件对子组件的调用上监听自定义事件，通过回调进行后续的处理。这里可以先设置一个回调函数 increase()，在回调函数中通过设置参数来接收子组件中自定义事件传递的参数，然后对参数进行累加即可。

修改后的 App.vue 文件代码如下：

<script setup>
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

const count = ref(0);
const increase = (step) => {
  count.value += step;
};
</script>

<template>
  <HelloWorld @increaseParentCount="increase" />
  <p>count:{{ count }}</p>
</template>

上面的代码在回调函数中设置了一个形参 step 来接收子组件传递的参数，在回调函数中实现响应式数据 count 的累加操作。

上面讲解的子向父通信是利用 $emit() 方法将自定义事件直接编写在模板上的。那有没有其他方式触发自定义事件呢？其实我们还可以在 script 脚本部分，利用 defineEmits() 函数来生成一个用于分发指定自定义事件的事件触发函数。

defineEmits() 函数的参数是一个字符串数组，每个字符串都是一个自定义事件的名称。后面我们就可以调用生成的事件触发函数来触发特定事件名的事件。

下面我们用 emits 来接收事件触发函数，利用它来触发自定义事件并传递参数数据。对于父组件来说，不管子组件的自定义事件是通过 $emit() 触发的，还是通过 script 脚本部分的 emits 触发的，结果都是一样的，父组件的内容不需要做任何修改。

修改后的 components/HelloWorld.vue 文件代码如下：

<template>
  <div>
    <button @click="$emit('increaseParentCount', 2)">直接触发自定义事件</button>
    <button @click="increase">通过脚本触发自定义事件</button>
  </div>
</template>

<script setup>
// defineEmits函数的参数是一个字符串数组，每个字符串是一个自定义事件的名称
const emits = defineEmits(['increaseParentCount']);
const increase = () => {
  emits('increaseParentCount', 3);
};
</script>

Vue $emits()实现组件通信（附带实例）

相关文章