梳理vue组件间通信六种方式（手敲一遍最好）

前言

A与B，B与C，B与D属于父子关系，A与C属于隔代（可能是多待）

方法一、props/$emit

1.父组件向子组件传值
例子：父组件Home.vue像子组件homeSon.vue传递一个users的数组[‘jery’,‘job’,‘jjx’]

//父组件使用v-bind:users绑定数据
<template>
	<div class="home">
		<son23 v-bind:users="users2"></son23>
	</div>
</template>
<script>
import son23 from '@/views/homeSon.vue'
export default {
  name: 'parentVue',
  data() {
            return {
                users2:['jery','job','jjx']
            }
       },
  components: {
    son23
  }
}
</script>

//子组件通过props接收
//props:{
//type:Array,
//required:true
//}
<template>
	<div>
		子组件dddddddddddddd
		<ul>
			<li v-for="(item,index) in users">
				<span>{{item}}</span>
			</li>
		</ul>
		<grandSon ></grandSon >
	</div>
</template>

<script>
	import grandSon from '@/views/GrandSon .vue'
	export default {
  name: 'LanlanGrandSon',
  data() {
            return {
                data: ''
            }
       },
  components: {
    grandSon
  },
  props:{
  	users:{
  		type:Array,
  		required:true
  	}
  }
}
</script>

备注：
父亲组件通过v-bind绑定数据，子组件通过props来接收数据。
组件中的数据的形式有三中：data，props，computed

2.子组件向父组件传值（通过事件方式）
例子：子组件homeSon.vue向父组件Home.vue传递一段文字’我是儿子你是父亲’

//子组件绑定事件@click="changeText"
//this.$emit('changeTextParent','我是儿子你是父亲')
<template>
	<div>
		<div @click="changeText">子组件dddddddddd</div>
	</div>
</template>
<script>
export default {
  name: 'LanlanGrandSon',
  data() {
            return {
                data: '90'
            }
       },
  methods:{
  	changeText(){
  		this.$emit('changeTextParent','我是儿子你是父亲')
  	}
  }
}

//父亲组件v-on:changeTextParent='updataText'
//接收参数updataText(text_){
//          this.textT=text_
// 	     }
<template>
<div class="home">
	<son23 v-on:changeTextParent='updataText' ></son23>
	<p>{{textT}}</p>
</div>
</template>
<script>
import son23 from '@/views/Son.vue'
export default {
  name: 'parentVue',
  data() {
            return {
                textT:''
            }
       },
  components: {
    son23
  },
  methods:{
  	updataText(text_){
  		this.textT=text_
  	}
  }
}
</script>

方法二、$emit/$on

在Vue中实现兄弟组件的通讯也有几种方法
1）父组件允当两个子组件之间的中间件（中继）
2）使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及父组件。
1.中继
让兄弟组件通过一个共同的父组件彼此通讯
首先创建ParentCard组件：

//ParentCard.vue 
<template>
  <brother :msgSon="msgSon" @brotherSaid="msgDaughter($event)"></brother>
  <sister :msgDaughter="msgDaughter" @sisterSaid="msgSon($event)"></sister>
</template>
 
<script>
    import Brother from './Brother';
    import Sister from './Sister'
    export default {
        name: 'ParentCard',
        data: () => ({
            theCardTitle: '父组件',
            msgDaughter:'', 
            msgSon:''
        }),
        components: {
            Brother,
            Sister 
        },
        methods: {
            msgDaughter(msg) {
                this.msgDaughter= msg;
            },
            msgSon(msg) {
                this.msgSon= msg;
            }
        }
    };
</script>

创建Sister组件：

//Sister.vue
<template>
<p class="message-text">我是Sister组件</p>
<button @click="msgBrother" class="btn">给哥哥发消息</button>
</template>
<script>
    export default {
        name: 'Sister',
        props: ['msgDaughter'],
        data: () => ({
            theCardTitle: '子组件2'
        }),
        methods: {
            msgBrother() {
                this.$emit('sisterSaid', '妈妈说，该做作业了！')
            }
        }
    }
</script>

接着创建BrotherCard组件：

//Brother.vue
<template>
   <p class="message-text">我是Brother组件</p>
   <button @click="msgSister" class="btn">给妹妹发消息    </button>
</template>
 
<script>
    export default {
        name: 'Brother',
        props: ['msgSon'],
        data: () => ({
            theCardTitle: '子组件1'
        }),
        methods: {
            msgSister() {
                this.$emit('brotherSaid', '妈妈说，该做作业了！')
            }
        }
    }
</script>

接下来简单看看这个实现过程。

Sister通过ParentCard与Brother通讯

首先来看Sister是如何与Brother通讯的。从示例中可以看出，他们两之间的通讯是通过其父组件ParentCard作为中间媒介来进行通讯的。

我们在Sister组件的中为msgBrother()方法设置了一个@click事件来监听该事件。

<button @click="msgBrother" class="btn">给哥哥发消息</button>

当用户点击Sister中的“给哥哥发消息”将会触发msgBrother()方法。在这个方法中，将发出一个sisterSaid事件，并且把妈妈说，该做作业了！(^_)!!!信息发送出去。

msgBrother() {
  this.$emit('sisterSaid', '妈妈说，该做作业了！')
            }

在ParentCard的中定制了一个@sisterSaid事件侦听器，它触发了msgSon()方法。所以父组件在这两个兄弟组件之间起到了传递的作用。

<sister :msgDaughter="msgDaughter" @sisterSaid="msgSon($event)"></sister>

另外在ParentCard组件中声明了msgSon()方法，该方法接受上面发送的自定义事件，并将其设置为msgson属性。

msgSon(msg) {
    this.msgson = msg;
}

这样一来，ParentCard组件中msgson 就由空字符串变成了妈妈说，该做作业了！。

接着在ParentCard组件自定义标签通过:msgSon="msgson"的方式将msgson属性绑定到。

 <brother :msgSon="msgSon" @brotherSaid="msgDaughter($event)"></brother>

这个时候在Brother组件中设置props的属性值为msgSon。这样就可以访问源自于Sister组件的数据，并且该数据在Brother中显示。

props: ["msgSon"]

2.事件总线