Vue3中如何将子组件事件传递给父组件以更新父组件值？

要实现点击子组件按钮让父组件的cardValue加1，核心是通过子组件触发自定义事件，父组件监听事件并更新状态，具体步骤如下：

1. 修改子组件，触发自定义事件 #

在子组件中，通过defineEmits声明要触发的事件，然后在点击方法里调用emit通知父组件：

<template>
  <div class="btn" id="btn" @click="addToCart(item)"> Add to cart</div>
</template>

<script setup>
// 声明要触发的自定义事件
const emit = defineEmits(['add-to-cart'])

const addToCart = (item) => {
  // 可选：这里可以处理子组件自身的业务逻辑，比如记录选中的item
  // 触发父组件的事件
  emit('add-to-cart')
}
</script>

2. 修改父组件，监听事件并更新值 #

父组件中引入子组件，监听子组件触发的add-to-cart事件，绑定处理函数更新cardValue：

<template>
  <p>{{ cardValue }}</p>
  <!-- 使用子组件并监听自定义事件 -->
  <ChildComponent @add-to-cart="handleAddToCart" />
</template>

<script setup>
import { ref } from 'vue'
// 引入你的子组件，替换为实际路径
import ChildComponent from './ChildComponent.vue'

// 初始化购物车数值
const cardValue = ref(0)

// 处理子组件触发的事件，更新数值
const handleAddToCart = () => {
  cardValue.value += 1
}
</script>

原理说明 #

• 子组件通过defineEmits注册自定义事件，符合Vue3的语法规范与类型检查要求；
• 点击按钮时调用emit('add-to-cart')，将事件信号传递给父组件；
• 父组件通过@add-to-cart监听事件，执行handleAddToCart方法修改cardValue的数值，完成状态更新。

内容的提问来源于stack exchange，提问作者Евгений Худак