Vue.JS快速上手（组件间的通信）

前言

Vue采用的是组件化思想，那么这些组件间是如何通信的呢？下面详细介绍一下。

所谓组件间通信，不单单是我们字面上理解的相互传递数据，这里还包括一个组件访问另一个组件的实例方法等，如父组件通过ref访问子组件实例成员，并实现传参。我们先来研究父子组件间是如何通信的。

一、父子组件通信

1. props实现父组件向子组件传递数据

父组件：

子组件：

 2. $emit实现子组件向父组件传递数据

父组件：

子组件：

 3.父组件通过ref访问子组件实例成员，并实现传参

父组件：

子组件：

总结一下，如果是数据传递的话：

父->子: props； 子->父: $emit

父组件通过ref访问子组件实例成员，并实现传参

二、兄弟组件间传递

什么是兄弟组件，也就是一个父组件下的多个子组件，他们之间如何实现数据传递呢？

1：通过父组件中介，进行数据传递

父组件:

子组件A:

子组件B:

2: 通过$parent访问父组件数据

父组件:

子组件A:

子组件B:

注意：A组件通过$emit传过来的值，在父组件定义后可以直接使用

3.总线模式(bus): 监听与订阅(事件)

1.在main.js添加vue类型原型属性, 使得所有vue实例(组件)都可以通过this来访问bus对象

2.谁调用谁就触发事件，将值往下传，下面的子子孙孙都可以通过$on接收

3.子组件监听Vue上的bus对象after-change，实现接收

三、陌生组件间数据传递

方案1：通过$root获取根组件实例

方案2：通过在Vue.prototype添加响应式对象

结尾

以上就是常用的组件通信方法，不过日常开发还是Vuex用的多一点，Vuex真正实现了共享数据，但这并不意味着Vuex就天下无敌了，要实现组件封装还是要用基本的方法来实现。