Vue通讯：无拘束且高效的组件间通信

2024-02-18 21:38:27

在开发复杂的 Vue.js 应用时，我们常常会遇到组件之间需要互相传递数据或协同工作的场景。这时，了解和掌握 Vue 的组件通信方式就显得尤为重要。Vue 提供了多种方式来实现组件间的通信，每种方式都有其适用场景和优缺点。让我们来逐一探讨一下这些方式，并通过一些简单的例子来理解它们是如何工作的。

1. 父子组件通信：Props

当我们需要从父组件向子组件传递数据时，最直接的方式就是使用 Props。Props 可以理解为子组件的自定义属性，父组件可以通过这些属性向子组件传递数据。

举个例子，假设我们有一个 UserCard 组件，用于展示用户信息，用户信息由父组件提供：

// UserCard.vue
<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>{{ email }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    email: String
  }
}
</script>

在 UserCard 组件中，我们通过 props 选项声明了两个属性：name 和 email，它们分别用于接收用户的姓名和邮箱地址。

在父组件中，我们可以这样使用 UserCard 组件：

// App.vue
<template>
  <div>
    <UserCard name="John Doe" email="john.doe@example.com" />
  </div>
</template>

这样，父组件就把 "John Doe" 和 "john.doe@example.com" 分别传递给了 UserCard 组件的 name 和 email 属性。

2. 子父组件通信：Emit

当子组件需要向父组件传递数据或通知父组件发生了某个事件时，我们可以使用 $emit 方法。$emit 方法可以触发一个自定义事件，父组件可以通过 v-on 指令监听这个事件，并在事件触发时执行相应的回调函数。

延续上面的例子，假设我们在 UserCard 组件中添加一个按钮，点击按钮时通知父组件用户被点击了：

// UserCard.vue
<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>{{ email }}</p>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    handleClick() {
      this.$emit('user-clicked', this.name); 
    }
  }
}
</script>

这里，我们使用 $emit 方法触发了一个名为 user-clicked 的事件，并把用户的姓名作为参数传递给父组件。

在父组件中，我们可以这样监听 user-clicked 事件：

// App.vue
<template>
  <div>
    <UserCard name="John Doe" email="john.doe@example.com" @user-clicked="handleUserClick" />
  </div>
</template>

<script>
export default {
  methods: {
    handleUserClick(userName) {
      console.log('User clicked:', userName);
    }
  }
}
</script>

当用户点击 UserCard 组件中的按钮时，handleUserClick 方法会被调用，并输出用户的姓名。

3. 非父子组件通信：Event Bus

当我们需要在非父子组件之间进行通信时，可以使用 Event Bus。Event Bus 实际上就是一个全局的 Vue 实例，我们可以通过它来订阅和发布事件。

首先，我们需要创建一个 Event Bus：

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

然后，在需要发布事件的组件中，我们可以使用 $emit 方法：

// ComponentA.vue
import { eventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message-sent', 'Hello from ComponentA');
    }
  }
}

在需要订阅事件的组件中，我们可以使用 $on 方法：

// ComponentB.vue
import { eventBus } from './eventBus';

export default {
  mounted() {
    eventBus.$on('message-sent', (message) => {
      console.log('Received message:', message);
    });
  }
}