原因:
由于Vue3中的mian.js文件中,已经不提供Vue2的挂载方式, Vue.prototype.$bus = this
Vue2:
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this // 安装全局事件总线
}
})
Vue3:
createApp(App).mount('#app')
解决:
需要使用第三方库 EventBus
安装
$ npm install --save vue3-eventbus
挂载
import eventBus from 'vue3-eventbus'
app.use(eventBus)
使用
// Button.vue
import bus from 'vue3-eventbus'
export default {
setup() {
bus.emit('foo', { a: 'b' })
}
}
引入后:
main.js中使用 use() 方法
import eventBus from 'vue3-eventbus'
createApp(App).use(eventBus).mount('#app')
其它文件引入后,,
使用 bus.on() 替代 原本 this.$bus.$on() 写法
以此类推 bus.emit()、 bus.off()、 bus.on()
import bus from 'vue3-eventbus'
mounted(){
//Vue2
this.$bus.$on()
//现在
bus.on()
}