Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要先监听对应子组件触发的事件) 向父组件传递信息。 但是当我们需要进行非父子组件间的通信或者是父子组件间的通信需要层层传递过于复杂时就需要使用非父子组件通信方案来进行组件间信息的传递: 下面是常见的两种非父子组件通信方案: 使用一个空的 Vue 实例作为一个事件总线中心 Bus 使用专门的状态管理模式 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. 在需要发送或接收事件的组件里面 //