vue组件通信大全

vue组件通信方式很多同学会说我知道，这个简单，props传值，$emit回传，再不行就vuex。但实际上vue组件通信远远不止这些，并不是层级一多就要用vuex，一个项目就要隔多级传几个静态参数，你说我用vuex，我想这就是杀鸡用了宰牛刀，今天就来说一下具体有多少种方式，并且如何应用。

组件通信方式列举

组件通信常用方式

1、props/$emit。
2、event。
3、vuex。

自定义事件
1.边界情况

4、$parent。
5、$root。
6、$children。
7、$refs。
8、provide/inject。

2.非prop特性

9、$attrs。
10、$listeners。

组件通信的应用

1.props/$emit
props传值非常简单，这个是最最常用的，我简单写下例子。

父组件给子组件传值

// parent 组件
<Parent msg="Welcome to vue props"/>

// child里面通过props获取msg
props: { msg: String } 

子组件传值给父组件,使用$emit

// child里面调用$emit, 第一个参数是方法名，后面都是参数
this.$emit('add', good) 

// parent，$emit会触发父组件add方法
<Parent @add="parentAdd($event)" />

2.event事件总线
前面说到的props和/$emit父子组件通信，他们存在引入与被引入的关系，如果不存在这种关系我们该怎么办呢？
这时我们常常会用到事件总线或者vuex的方式。

首先在main.js文件中通过vue原型属性初始化EventBus，
这种方式初始化的是一个全局事件总线。

import Vue from 'vue'
import App from './App.vue'

// 事件总线
Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App),
}).$mount('#app')

在组件1中发送信息

// 利用事件总线发送事件
this.$bus.$emit('event-from-component1', 'some msg from component1')

在组件2中监听接受信息

this.$bus.$on('event-from-component1', msg => {
    console.log('component2:', msg);
});

这时只要在组件1中触发$bus.$emit的方法，组件2中$bus.$on方法就会调用，控制台就会输出：

3.vuex

创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。
vuex的强大这里就不赘述了，vuex内容比较多也不是本文的主题，这里就不细讲了，不熟悉的同学先去看下官网：https://vuex.vuejs.org/zh/guide

4.$parent
兄弟组件直接可以通过共同的祖先搭桥联通，$parent和$root都可以做到。

// brother1中发出方法
this.$parent.$emit('event-from-brother1', 'some msg from brother1')`

// brother2中接收方法
this.$parent.$on('event-from-brother1', msg => {
    console.log('brother2:', msg);
});

这时触发brother1中的方法，控制台就会显示：

这是兄弟组件通信的方法，我们也可以通过$parent从子组件调用父组件的方法。

// parent里面methods定义了一个方法
methods: {
      fatherMethod() {
        console.log('我是你爹');
      }
    }
    
// children子组件里面调用父组件方法
this.$parent.fatherMethod()

当$parent.fatherMethod()方法在子组件被调用控制台便会打出：我是你爹

5.$root

$root和上面parent类似，这里就不赘述，具体请移步官网。

6.$children

父组件可以通过$children访问子组件实现父子通信,但是父组件可能含有多个子组件，所以要区分开

this.$children[index].xx = 'xxx'
 

但是有一点需要注意$children实际上不能保证子元素的顺序，也不是响应式的。
因为$children是根据你页面加载组件的顺序去确定子组件在 $children数组中的顺序。
如果A组件在B组件先加载，那么A组件的下标就是0，B组件的下标就是1。
如果有动态组件很容易出错，所以我们并不建议使用。
然而我们常用的$refs就可以解决这个问题。

7.$refs
回去节点引用，也就是获取dom

// dom中引入
<div ref="tx" /> 

// 获取上面div的dom从而操作
this.$refs.tx 

在父组件中通过ref调用子组件的方法，这里就不会有$children的顺序问题了，因为ref是一一对应的。

// 父组件
<Child2 ref="child2" msg="some message"></Child2>

// 子组件
methods: {
  sendToChild1() {
    console.log('我是父组件使用ref调用的方法')
  }
},

// 在父组件中调用子组件方法sendToChild1
`this.$refs.child2.sendToChild1()`

8.provide/inject
能够很好的跨层级通信。官网也做比较详细的说明：https://cn.vuejs.org/v2/api/#...。
这个方法其实也挺好用的，但是很多同学并没有用过，可能都不是很清楚。
下面我们来具体说一下：

// 祖辈组件中提供了一个变量，这时我们使用provide方法注入
provide() {
  return {
    father: 'father'
  }
},
// 这时我们需要在某个后代元素中获取这个father变量
// 注入之后我们就可以在该后代组件中使用变量father了
inject: ['father']

// inject另外一种写法
// 这时我们需要对变量重命名，同时可以设置默认值
inject: {
  bar1: {
    from: 'father',
    default: 'barrrrrrrr'
  }
}, 

我们也可以把注入值放入我们该后代元素的data中去使用，provide/inject基本用法就是这样的。

9.$attrs
$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
当一个组件没有 声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外)，并且可以通过 v- bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

// 爷爷组件中给父亲组件注入信息
<Parent msg="msg" />

// 父亲组件，我们需要在父亲组件中绑定$attr以便于孙子组件获取信息
<Children v-bind="$attrs" />

// 孙子组件：在props中没有声明msg,这时子组件依然能够收到信息
<div> {{$attrs.msg}}</div>

这时孙子组件就可以获取msg的信息了，这里其实都是跨层级通信的。
10.$listeners
如果我们需要从孙子组件调用爷爷组件的方法，实现跨层级通信的话，可以使用到$listeners。

// 爷爷组件
<Parent msg="msg" @foo="onFoo"/>

// 爷爷组件methods设置方法
onFoo() {
    console.log('msg from Children');
}

// 父亲组件，绑定$listeners
<Children v-bind="$attrs" v-on="$listeners" />

// 孙子组件：调用foo方法
this.$emit('foo')

以上内容只是本人的学习总结，紧供参考。