当前位置：首页 > article >正文

Vue 3 30天精进之旅：Day 08 - 组件通信

article 2025/1/30 11:44:55

在Vue 3的开发过程中，组件之间的通信是一个至关重要的概念。理解如何在父子组件、兄弟组件以及通过全局事件总线进行通信，将帮助我们构建更为灵活和可维护的应用。在今天的学习中，我们将探讨以下几个方面：

父子组件之间的通信
兄弟组件之间的通信
非父子组件之间的通信
总结与实践

1. 父子组件之间的通信

在Vue中，父子组件之间的通信主要通过 props 和 自定义事件 实现。

使用 Props 传递数据

父组件可以通过 props 将数据传递给子组件。我们来看一个简单的示例：

vue

<!-- ParentComponent.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

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{
  
  { message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

在这个例子中，ParentComponent 将 parentMessage 作为 message prop 传递给 ChildComponent，子组件通过 props 接收数据并展示。

使用 Custom Events (自定义事件)

子组件可以通过 $emit 方法向父组件发送消息或事件。例如：

vue

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageFromChild', 'Hello from Child!');
    },
  },
};
</script>

vue

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @messageFromChild="receiveMessage" />
    <p>{
  
  { receivedMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedMessage: '',
    };
  },
  methods: {
    receiveMessage(msg) {
      this.receivedMessage = msg;
    },
  },
};
</script>

在这个例子中，ChildComponent 通过 sendMessage 方法触发自定义事件 messageFromChild，而 ParentComponent 则在接收到事件后更新了 receivedMessage。

2. 兄弟组件之间的通信

兄弟组件之间的通信可以通过父组件作为中介来实现。父组件可以将数据作为 props 传递给两个兄弟组件，或者通过事件监听来传递消息。

例如，假设我们有两个兄弟组件 SiblingA 和 SiblingB，它们需要通信。我们可以在父组件中处理这个逻辑：

vue

<!-- ParentComponent.vue -->
<template>
  <div>
    <SiblingA @sendMessage="updateMessage" />
    <SiblingB :message="sharedMessage" />
  </div>
</template>

<script>
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

export default {
  components: {
    SiblingA,
    SiblingB,
  },
  data() {
    return {
      sharedMessage: '',
    };
  },
  methods: {
    updateMessage(msg) {
      this.sharedMessage = msg;
    },
  },
};
</script>

SiblingA.vue 触发事件

vue

<!-- SiblingA.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Sibling B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('sendMessage', 'Hi from Sibling A');
    },
  },
};
</script>

SiblingB.vue 接收对方的消息

vue

<!-- SiblingB.vue -->
<template>
  <div>
    <p>{
  
  { message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

3. 非父子组件之间的通信

对于不直接关联的组件，我们通常可以使用 中央事件总线 或 状态管理工具（如 Vuex 或 Pinia）来进行通信。

使用中央事件总线

创建一个事件总线，允许不同组件通过它进行通信。

javascript

// eventBus.js
import { reactive } from 'vue';

const eventBus = reactive({});

export default eventBus;

然后在组件中使用它发送和接收事件：

javascript

// AnyComponent.vue
import eventBus from './eventBus';

export default {
  mounted() {
    this.sendMessage();
    eventBus.on('my-event', this.handleEvent);
  },
  methods: {
    sendMessage() {
      eventBus.dispatch('my-event', 'Hello from AnyComponent');
    },
    handleEvent(msg) {
      console.log(msg);
    },
  },
};