Vue组件间通信手段汇总，不同场景，不同方法，灵活运用更有效

2023-12-01 22:05:20

Vue组件间通信方式解析

Vue 组件间通信是指组件之间传递信息的过程，这是构建复杂且可维护的 Vue 应用的关键。Vue 提供了多种组件间通信方式，每种方式都有其独特的优缺点，适用于不同的场景。

1. 事件总线

事件总线是一种组件间通信机制，它允许组件通过发布和订阅事件来进行通信。发布事件的组件称为发布者，订阅事件的组件称为订阅者。当发布者发布事件时，所有订阅该事件的组件都会收到通知。

事件总线通常使用 Vue.js 的全局事件总线来实现。我们可以通过 Vue.prototype.$on() 和 Vue.prototype.$emit() 方法来发布和订阅事件。

例如，我们可以创建一个名为 message-bus 的事件总线，并在两个组件中使用它进行通信：

// ParentComponent.vue
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('message', 'Hello from parent!');
    }
  }
};

// ChildComponent.vue
export default {
  mounted() {
    this.$bus.$on('message', (message) => {
      console.log(message); // 输出：Hello from parent!
    });
  }
};

事件总线是一种简单且易于使用的组件间通信方式，它适用于需要在多个组件之间传递少量数据的情况。

2. Vuex

Vuex 是一个状态管理库，它允许我们在 Vue 应用中集中管理状态。我们可以通过 Vuex 来实现组件间通信，只需将需要共享的数据存储在 Vuex 状态中，然后在需要使用这些数据的组件中获取即可。

例如，我们可以创建一个名为 count 的 Vuex 状态，并在两个组件中使用它进行通信：

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// ParentComponent.vue
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    }
  }
};

// ChildComponent.vue
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};

Vuex 是一种强大的组件间通信方式，它适用于需要在多个组件之间共享大量数据的情况。

3. props

props 是组件间通信的另一种方式，它允许父组件向子组件传递数据。props 是只读的，这意味着子组件不能修改它们。

例如，我们可以创建一个名为 message 的 prop，并在父组件中向子组件传递数据：

// ParentComponent.vue
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
};

// ChildComponent.vue
export default {
  props: ['message'],
  template: '<p>{{ message }}</p>'
};

props 是一种简单且易于使用的组件间通信方式，它适用于需要从父组件向子组件传递少量数据的情况。

4. 子组件

子组件可以访问父组件的数据和方法，因此我们可以通过子组件来实现组件间通信。

例如，我们可以创建一个名为 ChildComponent 的子组件，并在父组件中使用它来显示数据：

// ParentComponent.vue
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
};

// ChildComponent.vue
export default {
  template: '<p>{{ parentMessage }}</p>',
  computed: {
    parentMessage() {
      return this.$parent.message;
    }
  }
};

子组件是一种简单且易于使用的组件间通信方式，它适用于需要从父组件向子组件传递大量数据或方法的情况。

5. 父组件

父组件可以访问子组件的数据和方法，因此我们可以通过父组件来实现组件间通信。

例如，我们可以创建一个名为 ParentComponent 的父组件，并在子组件中使用它来触发方法：

// ParentComponent.vue
export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      this.$refs.childComponent.sendMessage();
    }
  }
};

// ChildComponent.vue
export default {
  methods: {
    sendMessage() {
      console.log('Hello from child!');
    }
  }
};

父组件是一种简单且易于使用的组件间通信方式，它适用于需要从子组件向父组件传递数据或触发方法的情况。

6. 全局事件

全局事件是一种组件间通信方式，它允许组件通过发布和订阅全局事件来进行通信。发布全局事件的组件称为发布者，订阅全局事件的组件称为订阅者。当发布者发布全局事件时，所有订阅该全局事件的组件都会收到通知。

我们可以通过 Vue.prototype.$on() 和 Vue.prototype.$emit() 方法来发布和订阅全局事件。

例如，我们可以创建一个名为 message 的全局事件，并在两个组件中使用它进行通信：

// ParentComponent.vue
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from parent!');
    }
  }
};

// ChildComponent.vue
export default {
  mounted() {
    this.$on('message', (message) => {
      console.log(message); // 输出：Hello from parent!
    });
  }
};