Vue组件间如何通信？props和$emit怎么用？

Vue组件间通信的核心机制是父组件通过props向子组件传递数据，子组件通过$emit向父组件传递事件，二者配合实现父子组件数据流动；兄弟组件可通过共同父组件中转或状态管理工具实现通信。 以下是具体用法和注意事项：

• 作用：props是父组件向子组件传递数据的桥梁，相当于子组件的“输入参数”。
• 使用方法：

  子组件定义props：显式声明props类型（如String、Array），便于排查问题。// 子组件 Child.vueexport default { props: { title: { type: String, default: '默认标题' // 设置默认值避免未传值时报错 }, items: { type: Array, required: true // 标记为必填项 } }}

  父组件绑定属性传值：使用冒号:绑定变量，避免直接传递字符串。<!-- 父组件 Parent.vue --><Child :title="pageTitle" :items="listData" />

• 注意事项：

  不要直接修改props，应通过计算属性或触发事件通知父组件修改。

  推荐显式声明props类型，而非直接使用数组形式（如props: ['title']）。

• 作用：子组件通过$emit触发事件，通知父组件执行特定操作。
• 使用方法：

  子组件触发事件：调用this.$emit('事件名', 数据)。// Child.vuemethods: { updateTitle() { const newTitle = "新标题"; this.$emit('update-title', newTitle); }}

  父组件监听事件：使用@事件名或v-on:事件名绑定方法。<!-- Parent.vue --><Child @update-title="handleUpdate" />methods: { handleUpdate(newTitle) { this.pageTitle = newTitle; }}

• 简化双向绑定：

  使用.sync修饰符（Vue 2.x）或v-model（Vue 3.x）简化代码。<!-- Vue 2.x --><Child :title.sync="pageTitle" /><!-- Vue 3.x 推荐 --><Child v-model:title="pageTitle" />

• 通过共同父组件中转：

  兄弟组件A通过$emit通知父组件，父组件再通过props将数据传递给兄弟组件B。

  示例：

  组件A触发事件：// ComponentA.vuethis.$emit('data-updated', newData);

  父组件监听并传递数据：<!-- Parent.vue --><ComponentA @data-updated="handleDataUpdate" /><ComponentB :data="sharedData" />data() { return { sharedData: null };},methods: { handleDataUpdate(newData) { this.sharedData = newData; }}

• 状态管理工具：

  复杂场景可引入Vuex（Vue 2.x）或Pinia（Vue 3.x）集中管理状态，避免多层嵌套传递。

• props默认值与必填项：

  设置默认值或使用required: true标记必填项，避免未传值时报错。props: { title: { type: String, default: '默认标题' }, items: { type: Array, required: true }}

• 变量传递语法：

  使用冒号:绑定变量，如<Child :title="pageTitle" />；直接写字符串会传递静态值（如title="myTitle"传递的是字符串"myTitle"）。

• 事件命名规范：

  遵循kebab-case（短横线分隔），如@update-title，因HTML属性不区分大小写。

• 避免直接修改props：

  若需修改props，应通过$emit通知父组件，或使用计算属性派生新值。

• 父子通信：props（父→子） + $emit（子→父）是核心机制，需注意类型声明、默认值和命名规范。
• 兄弟通信：优先通过共同父组件中转，复杂场景使用状态管理工具。
• 代码清晰度：合理使用这些机制能提升代码结构，避免数据流动混乱。