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获取msgprops: { 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')以上内容只是自己的学习总结，紧供参考。