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传值--小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。