Vue兄弟组件通信Bus传值--小案例
2018-05-18 本文已影响0人
_TSRed
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-组件通讯