vue3子组件触发父组件事件

在Vue3中，子组件可以通过使用`defineEmits`函数定义自己的事件，并通过`emit`方法触发该事件，从而将数据传递给父组件。下面是一个示例代码，展示了子组件触发父组件事件的两种写法。

第一种写法是在子组件中使用`defineEmits`函数定义子组件的事件，并通过`emit`方法触发该事件。父组件使用`@子组件触发的方法名`监听该事件，并在父组件中定义相应的方法。代码如下：

// 子组件
const emit = defineEmits(["changeData"]);
const changeTotal = (form) => {
  emit("changeData", form);
};

// 父组件
<my-childe @changeData="父组件方法名"></my-childe>

第二种写法是在子组件中通过`props`方式将父组件的方法传递给子组件，并在子组件中调用该方法来触发父组件事件。代码如下：

// 父组件
<my-childe :xx="父组件方法名"></my-childe>

// 子组件
props: ['xx'],
<div @click="xx">点击调用父组件传过来的方法</div>

以上两种方式都可以实现子组件触发父组件事件的效果。根据具体需求选择适合的方式即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3子组件调用父组件的方法](https://blog.csdn.net/weixin_51924709/article/details/126344051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [[vue3] 子组件调用父组件的多种方法](https://blog.csdn.net/wyy7293/article/details/123918547)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]