怎樣操作vue中$emit與$on父子與兄弟組件通信

//父組件：parent.vue
<template>
 <p>
 <child :vals = "msg"></child>
 </p>
</template>
<script>
import child from "./child";
export default {
 data(){
 return {
 msg:"我是父組件的數據，將傳給子組件"
 }
 },
 components:{
 child
 }
}
</script>
//子組件：child.vue
<template>
 <p>
 {{vals}}
 </p>
</template>
<script>
export default {
 props:{ //父組件傳值 可以是一個數組，對象
 vals:{
 type:String,//類型為字符竄
 default:"123" //可以設置默認值
 }
 },
}
</script>

//父組件：parent.vue
<template>
 <p>
 <child v-on:childevent='wathChildEvent'></child>
 <p>子組件的數據為：{{msg}}</p>
 </p>
</template>
<script>
import child from "./child";
export default {
 data(){
 return{
 msg:""
 }
 },
 components:{
 child
 },
 methods:{
 wathChildEvent:function(vals){//直接監聽 又子組件觸發的事件，參數為子組件的傳來的數據
 console.log(vals);//結果：這是子組件的數據，將有子組件操作觸發傳給父組件
 this.msg = vlas;
 } 
 }
}
</script>
//子組件：child.vue
<template>
 <p>
 <input type="button" value="子組件觸發" @click="target">
 </p>
</template>
<script>
export default {
 data(){
 return {
 texts:'這是子組件的數據，將有子組件操作觸發傳給父組件'
 }
 },
 methods:{
 target:function(){ //有子組件的事件觸發 自定義事件childevent
 this.$emit('childevent',this.texts);//觸發一個在子組件中聲明的事件 childEvnet
 }
 },
}
</script>

//父組件：parent.vue
<template>
 <p>
 <child v-on:childevent='wathChildEvent' ref="childcomp"></child>
 <input type="button" @click="parentEnvet" value="父組件觸發" />
 <p>子組件的數據為：{{msg}}</p>
 </p>
</template>
<script>
import child from "./child";
export default {
 data(){
 return{
 msg:""
 }
 },
 components:{
 child
 },
 methods:{
 wathChildEvent:function(vals){//直接監聽 又子組件觸發的事件，參數為子組件的傳來的數據
 console.log(vals);//這是子組件的數據，將有子組件操作觸發傳給父組件
 this.msg = vlas;
 },
 parentEnvet:function(){
 this.$refs['childcomp'].target(); //通過refs屬性獲取子組件實例，又父組件操作子組件的方法觸發事件$meit
 }
 }
}
</script>
//子組件：child.vue
<template>
 <p>
 <!-- dothing..... -->
 </p>
</template>
<script>
export default {
 data(){
 return {
 texts:'這是子組件的數據，將有子組件操作觸發傳給父組件'
 }
 },
 methods:{
 target:function(){ //又子組件的事件觸發 自定義事件childevent
 this.$emit('childevent',this.texts);//觸發一個在子組件中聲明的事件 childEvnet
 }
 },
}
</script>

//建立一個空的Vue實例,將通信事件掛載在該實例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟組件a:childa.vue
<template>
 <p>
 <span>A組件->{{msg}}</span>
 <input type="button" value="把a組件數據傳給b" @click ="send">
 </p>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
 return {
 msg:"我是a組件的數據"
 }
 },
 methods:{
 send:function(){
 vmson.$emit("aevent",this.msg)
 }
 }
}
</script>
//兄弟組件b:childb.vue
<template>
 <p>
 <span>b組件,a傳的的數據為->{{msg}}</span>
 </p>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
 return {
 msg:""
 }
 },
 mounted(){
 vmson.$on("aevent",(val)=>{//監聽事件aevent，回調函數要使用箭頭函數;
 console.log(val);//打印結果：我是a組件的數據
 this.msg = val;
 })
 }
}
</script>
//父組件：parent.vue
<template>
 <p>
 <childa><childa>
 <childb></childb>
 </p>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
 data(){
 return{
 msg:""
 }
 },
 components:{
 childa,
 childb
 },
}
</script>