vue的兄弟组件通信

写了很多vue方面的东西，最近才发现自己居然没有接触过兄弟组件通信这个功能，当我第接触写错了，因此记录下使用方式

，正确写法如下

首先现在 main.js定义下
var bus = new Vue();
Vue.prototype.bus = bus;

新建两个组件，引入到父组件中，比如first组件，last组件

first组件

<template>
    <div>
        这是first组件的{{msg}}
         <el-button  @click="sendLast">点击我更新下面的</el-button>
    </div>
</template>

事件如下
	data(){
        return {
            msg: ''
        }
    },
    mounted(){
        this.bus.$on('sendFirst',(val)=>{
            this.msg = val
        })
    },
     methods:{
        sendLast(){
            this.bus.$emit('sendLast','小弟好')
        }
    }

last组件

<template>
    <div>
        这是last组件的{{msg}}
         <el-button  @click="sendFirst">点击我更新上面的</el-button>
    </div>
</template>

事件如下
	data(){
        return {
            msg: ''
        }
    },
    mounted(){
        this.bus.$on('sendLast',(val)=>{
            this.msg = val
        })
    },
     methods:{
        sendFirst(){
            this.bus.$emit('sendFirst','小弟好')
        }
    }

然后在父组件中引入即可

	<template>
    <div>
      <first/>
       <last/>
    </div>
</template>

这样即可
…