這篇文章帶給大家的內容是關於vue非父子元件傳值和事件匯流排（eventbus）的使用方式介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
先說一下什麼是事件總線，其實就是訂閱發布者模式；
#例如有一個bus對象，這個對像上有兩個方法，一個是on（監聽，也就是訂閱），一個是emit（觸發，也就是發布），我們透過on方法去監聽某個事件，再用emit去觸發這個事件，同時呼叫on中的回呼函數，這樣就完成了一次事件觸發；
這是一種設計模式，跟語言沒有關係；
如果不太了解什麼是訂閱發布者模式，請移步看這篇文章JavaScript設計模式--觀察者模式（發布者-訂閱者模式）
在實際開發中，往往最麻煩的就是各種元件之間的傳值問題；如果利用事件匯流排就會讓這件事情變得很簡單；
vue自帶事件總線的短板
我們都知道在vue被實例化之後，他就具備了充當事件總線物件的能力，在他上面掛了兩個方法，是$emit和$on；
而vue文件說的很明白，$emit會觸發目前實例上的事件，附加參數都會傳給監聽器回呼；
由於在實際工作中，我們都是以組件的形式開發，每個組件就是一個實例；
所以利用vue自帶的總線能力有很大的局限性，最多只能從子組件觸發到父元件中，而不能在非父子元件之間傳值；
所以這時，我們就需要有一個全域的事件匯流排對象，讓我們掛載監聽事件和觸發事件；
// 子组件中
<template>
<div>
<span>{{child}}</span>
<input type="button" value="点击触发" @click="send">
</div>
</template>
<script>
export default {
data () {
return {
child: '我是子组件的数据'
}
},
methods: {
send () {
// 如果传多个值就用逗号隔开 a, b, c
this.$emit('fromChild', this.child)
}
}
}
</script>// 父组件
<template>
<div>
<span>{{name}}</span>
// 在父组件中监听 fromChild事件
<child @fromChild="onFromChild"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
},
methods: {
onFromChild: function (data) {
// data就是子组件传过来的值
// 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
this.name = data
}
}
}
</script>實作全域事件匯流排物件的幾種方式
方式一，也是我自己使用的方式（建議使用，簡單）
大概思路是：在main.js，也就是入口文件中，我們在vue的原型上新增一個bus物件；
具體實作方式如下：
下面的元件A和元件B可以是專案中任兩個元件
//在mian.js中
Vue.prototype.bus = new Vue() //这样我们就实现了全局的事件总线对象
//组件A中，监听事件
this.bus.$on('updata', function(data) {
console.log(data) //data就是触发updata事件带过来的数据
})
//组件B中，触发事件
this.bus.$emit('updata', data) //data就是触发updata事件要带走的数据大概的實現思路： 新建一個bus.js文件， 在這個文件裡實例化一下vue；然後在組件A和組件B中分別引入這個bus.js文件，將事件監聽和事件觸發都掛到bus.js這個實例上，這樣就可以實現全域的監聽與觸發了
// bus.js文件 import Vue from 'vue' export default new Vue()
// 组件A ，监听事件send
<template>
<div>
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: ''
}
},
created() {
let _this = this
// 用$on监听事件并接受数据
Bus.$on('send', (data) => {
_this.name = data
console.log(data)
})
},
methods: {}
}
</script>元件B
// 组件B， 触发事件send
<template>
<div>
<input type="button" value="点击触发" @click="onClick">
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
elValue: '我是B组件数据'
}
},
methods: {
// 发送数据
onClick() {
Bus.$emit('send', this.elValue)
}
}
}
</script>這樣我們就完成了一個簡單非父子元件之間的傳值。
以上是vue非父子元件傳值與事件匯流排（eventbus）的使用方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
