子组件如何与其父组件进行通信？

Question

子组件如何与其父组件进行通信？

Accepted Answer

子组件通过**发出事件 (emitting events)** 来与父组件通信。父组件使用 `@event-name` 来监听事件。这完成了 Vue 的单向数据流：**props 向下，events 向上**。 ## 从子组件发出事件 ```vue ``` ## 在父组件中监听 ```vue ``` 子组件不能（也不应该）直接修改父组件的数据。相反，它通过发出带有数据负载的事件来*请求*父组件执行操作；父组件拥有数据并进行更改。 ## 为什么要用 defineEmits 声明 emit ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` 使用 `defineEmits` 声明发出的事件可以记录组件的"输出"，启用负载的类型检查，并防止事件被意外当作原生 DOM 监听器处理。 ## 其他通信模式 ```text props + emits → parent ↔ direct child (the default, most common) provide/inject → pass data deep down without prop-drilling Pinia store → shared state across unrelated/distant components v-model → two-way binding (props + emit sugar) ``` ## 为什么这很重要发出事件是子组件影响父组件状态的标准、可预测的方式——保持了单向数据流（这使应用更容易理解和调试）。掌握 `defineEmits` + `@listener`，以及何时升级到 `provide/inject` 或 Pinia 进行非父子通信，涵盖了 Vue 的组件通信模型。