Vue组件通信的几种实现方法

组件的通信

一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。

常用的通信手段有两种：

1.ref：给元素或组件注册引用信息

2.children:访问父级组件和子组件的实例。

这两种方式都是直接通过实例的方式获取的方式。示例如下：

 //comA组件A export default { data () { return { title: '测试通信' } }, methods: { sayHello () { window.alert('你好'); } } } 

这里引用组件A

上面的例子我们可以看出我们使用ref来获取组件的实例上的方法和数据

 <div id="count"> <button> 显示两个组件的信息 </button></div> <div> {{ msg }} </div> <div> {{ msg }} </div>

$children 返回所有子组件的实例，是一个数组

 <div id="count"> 父组件中的msg: {{ msg }} </div> <div> {{ msg }} <button> 显示父组件msg </button></div> <div> {{ msg }} </div>

这两种方式是基于组件的上下文环境访问到父组件或者全部子组件（数组）。这种方式有很大的弊端是，无法跨级或兄弟间进行通信，比如如下的结构

 // parent.vue 

我们假如想在组件A中获取其他组件那么我们可能需要使用vuex或者和Bus事件总线的方式进行解决。

事件总线

定义事件总线的方式有以下两种

 // bus.js 事件总线 import Vue from 'vue' export const $bus = new Vue() 

 // main.js我们再main入口中定义这个事件总线 Vue.prototype.$bus = new Vue() 

发送事件

对下面comA说明，会接收来自父组件的参数number，并显示出来；有个按钮，点击会调用函数handleAddRandom，生成一个随机数，并调用事件总线的$emit方法，将随机数给事件总线，由事

件总线进行数据传递。

  <div> {{number}} <button>随机增加</button></div>

接收事件

  <div> 随机增加: </div> 

上面是我们通过事件总线的方式进行通信

然后我们来说下另一种可以媲美Vuex的一种方式provide / inject

provide / inject

说起这两个API可能大家不太明白我们来举例子说明

 // A组件 export default { provide: { name: 'Aresn' } } // B组件 export default { inject: ['name'], mounted () { console.log(this.name); // Aresn } } 

代码中我们可以看到我们再组件A中设置了一个provide:{name：”Aresn”}，这个方法的作用就是将该变量提供给所有的子组件。我们在B组件中我们使用indect获取了这个变量，这样我们就可以使用this.name获取到这个那么变量。下面我们可以使用一些骚操作大胆的替代Vuex。（这里说明一下官网中不建议我们是使用这两个API在常规应用程序中，建议使用在高阶组件中，建议归建议用的好就可以啦）

使用provide / inject期待Vuex

  <div> </div> Vue cli中搭建出来的项目结构中都会有一个app.vue作为入口组件，我们可以使用这个API在上面大做文章。 

这里我们把根组件实例作为一个参数传递给app变量，下面我们就可以通过app[变量||方法]达到vuex的目的

  <div> {{ app.userInfo }} </div>

但是这样做有一个弊端那就是可能会让根组件app.vue的代码变得特别的臃肿，当然也有解决办法，我们可以使用mixins混合的方式将不同的逻辑分开写到不同的js里面然后通过 mixins: [mixins_user]的方式在app.vue中引用这个mixin。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。