combus通讯-尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
combus通讯_vue兄弟组件通信bus传值--小案例
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1、首先定义一个bus.js文件
引入空的vue,实例化,曝光出去
import vue from 'vue'
const bus = new vue({})
export default bus
2、创建两个vue文件(兄弟组件)
值得注意的监听派发事件之后,要用es6的箭头函数
a组件
a组件:{{msg}}
a组件
//引入bus文件
import bus from './bus.js'
export default {
data(){
return {
msg:'taylorswift'
}
},
methods:{
brother(){
// 派发事件
bus.$emit('a',this.msg)
}
}
}
b组件
b组件:{{msg}}
//引入bus文件
import bus from './bus.js'
export default{
data(){
return{
msg:"goddess"
}
},
created(){
// 监听派发的事件
bus.$on('a',(res)=>{
console.log(res)
this.msg = res
})
}
}
如有不懂,可以看我的 vue-组件通讯
总结
以上是尊龙游戏旗舰厅官网为你收集整理的combus通讯_vue兄弟组件通信bus传值--小案例的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: