當前位置：
首頁 >
combus通讯_Vue兄弟组件通信Bus传值--小案例
發布時間：2024/10/8
81
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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传值--小案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java跳过_java跳过https证书
- 下一篇： vue单文件props写法_vue开发中