Vue兄弟组件通信Bus传值--小案例

1、首先定义一个bus.js文件

引入空的vue，实例化，曝光出去

import Vue from 'vue'

const Bus  = new Vue({})

export default Bus

2、创建两个vue文件（兄弟组件）

值得注意的监听派发事件之后，要用ES6的箭头函数

A组件
<template>
    <div id="app">
        A组件:{{msg}}
        <!--定义任意事件-->
        <button @click="brother">A组件</button>
    </div>
</template>

<script>
//引入bus文件
import bus from './bus.js'
export default {
    data(){
        return {
            msg:'TaylorSwift'
        }
    },
    methods:{
        brother(){
//          派发事件
            bus.$emit('A',this.msg)
        }
    }
}
</script>

<style>
</style>

B组件
<template>
    <div id="app">
        B组件:{{msg}}
    </div>
</template>

<script>
//引入bus文件
import bus from './bus.js'
export default{
    data(){
        return{
            msg:"Goddess"
        }
    },
    created(){
//      监听派发的事件
        bus.$on('A',(res)=>{
            console.log(res)
            this.msg = res
        })
    }
}
</script>

<style>
</style>

如有不懂，可以看我的 Vue-组件通讯