在 Vue 中，组件之间的传值（通信）可以通过多种方式实现，具体方式取决于组件之间的关系（父子、兄弟、祖孙等）。以下是常见的几种通信方法：
1. 父组件向子组件传值
父组件通过 props 将数据传递给子组件。
实现步骤：
- 父组件中通过属性绑定（
v-bind或:）向子组件传递数据。 - 子组件通过
props接收父组件传递的数据。
代码示例：
父组件：
vue
<template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent!' }; } }; </script>
子组件：
vue
<template> <div> <p>{``{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true } } }; </script>
2. 子组件向父组件传值
子组件通过 $emit 方法触发自定义事件，将数据传递给父组件。
实现步骤：
- 子组件使用
this.$emit('事件名', 数据)触发事件。 - 父组件监听该事件，并通过回调函数获取数据。
代码示例：
父组件：
vue
<template> <div> <ChildComponent @sendMessage="handleMessage" /> <p>Message from Child: {``{ childMessage }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { childMessage: '' }; }, methods: { handleMessage(msg) { this.childMessage = msg; } } }; </script>
子组件：
vue
<template> <div> <button @click="sendToParent">Send to Parent</button> </div> </template> <script> export default { methods: { sendToParent() { this.$emit('sendMessage', 'Hello from Child!'); } } }; </script>
3. 兄弟组件之间传值
兄弟组件之间没有直接的关系，可以通过以下方式实现：
方法 1：使用父组件作为中介
- 将需要共享的数据提升到父组件，通过父组件向兄弟组件传递数据。
代码示例：
父组件：
vue
<template> <div> <SiblingOne @sendToSibling="handleSiblingData" /> <SiblingTwo :data="siblingData" /> </div> </template> <script> import SiblingOne from './SiblingOne.vue'; import SiblingTwo from './SiblingTwo.vue'; export default { components: { SiblingOne, SiblingTwo }, data() { return { siblingData: '' }; }, methods: { handleSiblingData(data) { this.siblingData = data; } } }; </script>
兄弟组件之间：
- SiblingOne 使用
$emit向父组件传递数据。 - 父组件再通过
props将数据传递给 SiblingTwo。
方法 2：使用全局事件总线
- 创建一个事件总线（Event Bus），用来在组件间通信。
- Vue 3 推荐使用 Pinia 或 Vuex，而不是事件总线。
Event Bus 示例（Vue 2）：
javascript
// 创建事件总线 import Vue from 'vue'; export const EventBus = new Vue();
使用 EventBus：
- 兄弟组件 A 发送数据：
javascript
EventBus.$emit('customEvent', 'Hello, Brother!');
- 兄弟组件 B 接收数据：
javascript
EventBus.$on('customEvent', (data) => { console.log(data); // "Hello, Brother!" });
4. 跨层级组件通信（祖孙传值）
方法 1：provide 和 inject
provide：在祖组件中提供数据。inject：在任意子孙组件中接收数据。
代码示例：
祖组件：
vue
<template> <div> <ChildComponent /> </div> </template> <script> export default { provide() { return { sharedData: 'Data from Grandparent' }; } }; </script>
孙组件：
vue
<template> <div> <p>{``{ sharedData }}</p> </div> </template> <script> export default { inject: ['sharedData'] }; </script>
方法 2：使用 Vuex 或 Pinia（状态管理）
- 适合处理复杂场景，多个组件共享状态。
总结
| 场景 | 推荐方式 |
|---|---|
| 父子组件 | props 和 $emit |
| 兄弟组件 | 父组件中转 / Vuex / Pinia |
| 跨层级组件 | provide 和 inject |
| 多组件共享复杂数据 | Vuex / Pinia |
根据项目需求选择适合的方式即可！