vue中兄弟组件间的通信方式

一，子组件传递父组件，再父组件传递子组件

子组件向父组件传值$emit

<son @click="childClick">{{childValue}}</son>
export default {
  data () {
   return {
    childValue: '我是子组件的数据'
   }
  },
  methods: {
   childClick () {  
    this.$emit('childByValue', this.childValue)
   }
  }
 }

父组件接受值

<son v-on:childByValue="childByValue"></son>
data(){
	return{
		name:""	
	}
},
methods: {
   childByValue: function (childValue) {
    // childValue就是子组件传过来的值
    this.name = childValue
   }
  }
}

父组件给子组件传递值

<father :sendSon="value"></father>

子组件接受值

 props:[
	"sendSon"
]

二，事件车

我们可以创建一个单独的js文件eventBus.js,内容如下

import Vue from 'vue'
export default new Vue

父组件中

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

子组件a中

<template>
      <div class="components-a">
           <button @click="abtn">A按钮</button>
      </div>
</template>
<script>
import eventVue from '@/utils/eventBus.js'
export default {
      name: 'ComponentA',
      data () {
        return {
                ‘msg':"我是组件A"
        }
      },
      methods:{
           abtn=>{
                   eventVue .$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
           }
      }
}
</script>

子组件b中

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '@/utils/eventBus.js'
export default {
   name: 'ComponentB',
   data () {
        return {
           'btext':"我是B组件内容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn=>{
            eventVue.$on("myFun",(message)=>{
                 this.btext = message      
            })
       }
    }
}
</script>