Vue组件常用的六种通信方式

Vue组件常用的几种通信方式

前言

我们都知道vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。具有组件化的特点。所以我们项目开发中经常抽离出组件进行开发，所以我们经常遇到组件之间的通信，根据不同场景，来描述的通信的方式。不足之后，请谅解！

props

子组件使用props 接收父组件传递的值，子组件通过 $emit ，让父组件接收事件，改变父组件的data里面的值。
子组件通过事件向父组件传递值，父组件更改自己的数据，子组件接收更改后的值。

父组件 parent.vue子组件 child.vue

$emit/$on

通过Vue 的实例触发事件和监听事件，实现了跨级组件的通信。
在组件parent中监听固定的事件名，当child组件触发change事件后，监听到事件触发，触发事件时机不确定，一版在created 或 mounted 中监听事件

创建bus 事件流

$parent/$children

$parent/$children 可以访问到父组件或子组件的实例，通过 $ref 也可以获取到子组件实例，可以访问子组件属性和方法.

$attrs/$listeners

this. $attrs 包含了父作用域中不作为prop被识别的特性绑定(class和style除外)，解释就是，父组件传递了props ，但是子组件没有全部使用props 接收，没被子组件接收的那些props，在$attrs中就可以获取到； $listeners 即是包含了父作用域中的(不含.native修饰器的)v-on 事件监听器，可以使用 v-on='$listeners’传入到内部组件；在跨级组件中传递属性和事件非常有用。

Vuex

Vuex 是一个单向的数据流的状态管理模式，state 存放数据，当需要改变state 的数据时，只能通过 mutation 更改，如果有异步操作，可以使用 action，最终action 还是通过mutation 更改state 的数据。

Vue Components：Vue 组件，可以执行dispatch 方法触发action；

dispatch：组件触发action 的方法；

actions：负责接收组件触发的行为，可以在这里面调用commit()方法更改state中的数据；

commit：执行mutation的方法，commit(‘mutation 名称’)；

mutations：更改 state 数据的方法，只能进行同步操作；

state：存储数据的容器对象；

provide/inject 这个不实用，就不介绍啦

总结

父子级通信推荐使用：props/ $emit、$parent/ $children/$refs、 $attrs/$listeners

兄弟组件通信推荐使用： $emit/$on、Vuex

跨级组件通信推荐使用：provide/inject、 $emit/$on、Vuex、 $attrs/$listeners