vue 组件通信的方式

vue中进行组件通信是实现业务的最基本的技术。一般常见的场景有父子组件通信和跨组件通信。

一.父子组件通信

1.props和$emit

这是最常见的一种通信方式，父组件通过props传值给子组件。子组件通过事件触发的方式通知父组件更新

2.$attrs和$listeners

子组件可以通过$attr拿到非props的传值。

父组件绑定到子组件上的事件监听器，可以通过$listener拿到从而通知父组件更新。

通过v-bind和v-on可以实现父组件向孙组件多级传递

3.$parent和$children

父组件使用ref引用子组件，this.$refs['子组件']指向子组件实例，可以直接访问组件的数据和方法。而$children是一个数组，存放着引用组件的所有子组件实例

子组件的$parent指向父组件实例，可以直接访问父组件的数据和方法

4.作用域插槽

插槽中的内容由父组件维护，而子组件可以暴露自己的数据给父组件，父组件通过slot-scope能够拿到数据

<TestChild ref="TestChild" :a="a" :b="b" :c="3" @event1="fun1">
  <div slot="slot1" slot-scope="data1, data2">
    父级slot进去
    {{data1}}{{data2}}
  </div>
</TestChild>
<slot name="slot1" :data1="cData" :data2="cData"></slot>

 

二.任意组件之间通信

1.provide和inject

根级组件provide提供一些函数，子孙组件inject注入函数。子孙组件调用时可更新根组件中的数据

2.eventbus

用一个vue实例作为事件中心，在组件1中注册事件，在组件2中触发事件。可以达到通信的效果。(vm.$on()，vm.$emit()两个方法)

3.vuex

vuex作为一个中心仓库，由vuex统一维护数据。其他组件可以通过mapState,mapMutation,mapAction等映射取值。