vue组件通讯的几种方式（全面）

1 组件通讯的意义是什么？

1.1 vue框架开发的基本原理(了解)

①数据驱动视图 ②自底层向上增量开发 ③支持模块化开发 ④基于MVVM模式开发

1.2 组件通讯的意义?

①当应用逐渐扩大，每一个功能点又都是相对独立的组件，此时各功能(组件)就避免不了进行交互，例如：首页的“欢迎xx用户的登录”，数据源可以直接来自源于登录组件的from表单信息。
②简而言之，组件通讯最大的优势就是可以实现数据共享，从而减少一定的内存消耗，数据可以来源于一次请求，缓存在本地内存，其他组件可以使用。

2 组件通讯类型和各自实现原理？（传统型）

2.1 常见的组件通讯类型以及常见的通讯方式

通讯类型①：父传子 ②子传父 ③非父子组件（兄弟组件，隔代组件）

通讯方式：①props和$emit(常用于父子组件) ② $attrs和 $listeners ③provide和inject ④v-model ⑤ $parent和 $childrens ⑥vuex

2.2 父组件到子组件(父传子props)

思考：如何在子组件child(user.vue)中拿到parent（ceshi.vue）组件中的users数组

父组件parent：

子组件child

理解：

在父组件中引入子组件,并且挂载到父组件中。在子组件中将组件的name设置为Users，对应（ceshi.vue）文件中的components对象下的name值。在子组件中通过props（可以接受数组或者是对象）对象的形式，将父组件中users数组传递过来，以父组件数组:{type:数据类型，必加属性}
（必加属性）上文意思是users数据必须有属性值。也就是父组件传过来的users数组必须要有属性值。

2.4 父子组件(provide和inject)

此种方法，有一个好处就是无论子组件的嵌套层数有多深，只要父级提供（provide）了属性，子组件jnject[‘属性’]注入到当前组件，就可以拿到父组件的值。

2.5 子组件到父组件(子传父$emit和events方法)

（基本思路）子组件中绑定事件，通过事件触发this.$emit（‘自定义属性名’，要传递的数据）方法；父组件中引入子组件通过事件接受e，来拿取数据。

子组件

父组件

2.6 父子组件，兄弟组件，隔代组件(中央事件处理总线 $bus和 $on)

(基本思路)①通过new一个空的vue实例，抛出该实例 ②在想进行通讯的组件中引入那个空vue实例，并且使用事件来触发Bus.$emit(‘自定义属性名’,要传递的数据) 向目标组件发送数据 ③在目标组件中通过Bus.美元符on(‘传递过来的属性名’,将数据赋值给当前data中的属性)

A组件

B组件

C组件

》》》》》》》》》阅读过程中，有任何疑问，请联系我，谢谢！