Vue 非父子组件通信方案

Posted 2020-10-26 ccczss

Vue 非父子组件通信方案

概述

在 Vue 中模块间的通信很普遍
如果是单纯的父子组件间传递信息，父组件可以使用 props 将数据向下传递到子组件，而在子组件中可以使用 events （父组件需要先监听对应子组件触发的事件） 向父组件传递信息。
但是当我们需要进行非父子组件间的通信或者是父子组件间的通信需要层层传递过于复杂时就需要使用非父子组件通信方案来进行组件间信息的传递：

下面是常见的两种非父子组件通信方案：

1. 使用一个空的 Vue 实例作为一个事件总线中心 Bus
2. 使用专门的状态管理模式 vueX

一、事件总线中心 Bus

总线中心 Bus 的实现思想是先把自己在 main.js 里进行全局注册，这样在每个组件都能通过 this 访问到它，由于 Bus 本身就是一个 vue 实例，所以具备 $emit 和 $on 方法，这样我们就能在 Bus 上通过自定义事件的方式发送和监听事件来传递数据，而且不受组件的位置关系影响。

具体使用如下：

1. 在 main.js 里面

将 bus 从 通过 Vue.prototype 全局注册，这样在所有的vue实例中都能通过 this.$bus 访问到 Bus:

import Vue from ‘vue‘

const bus = new Vue()
Vue.prototype.$bus = bus

2. 在需要发送或接收事件的组件里面

    // 触发事件
    this.$bus.$emit(‘my-event‘, this.data);
    // 监听事件
    this.$bus.$on(‘my-event‘, this.handleFunction);
    // 取消事件
    this.$bus.$off(‘my-event‘, this.handleFunction);

    // 实际使用场景，在需要监听事件的组件中 在 created监听，在beforeDestroy中取消
    created (){
        this.$bus.$on(‘switch-change‘, this.switchChange);
    },
    beforeDestroy () {
        this.$bus.$off(‘switch-change‘, this.switchChange);
    },

二、状态管理模式 vueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。具体实现这里有详细的介绍