青岛网站设计定制,ppt代做平台,建设项目环境影响网站,呼伦贝尔建设网站在vue2中我们通过事件总线eventbus,来实现两个平行组件之间的通信#xff1a;
bus.js
import Vue from vue
// 创建vue实例
const Bus new Vue()
export default Bus在具体的组件中#xff1a; A.vue
import Bus from ./bus.js
// 发布一个事件
Bus.$emit(sendData, {nam…在vue2中我们通过事件总线eventbus,来实现两个平行组件之间的通信
bus.js
import Vue from vue
// 创建vue实例
const Bus new Vue()
export default Bus在具体的组件中 A.vue
import Bus from ./bus.js
// 发布一个事件
Bus.$emit(sendData, {name: Jack,age: 20})B.vue
import Bus from ./bus.js
// 订阅一个事件
Bus.on(sendData, (param) {console.log(param)
})main.js vue入口文件, 或者直接将bus实例挂在在vue的原型上
import Vue from vue
const Bus new Vue()
Vue.prototype.$Bus Bus// 直接使用this调用
this.$Bus.on(foo, e console.log(e))
this.$Bus.emit(foo, {a: b})那么在vue3我们也可以通过mitt.js来实现两个平行组件之间的通信 首先安装npm install --save mitt 在项目src目录下新建一个 mitt.js 文件
import mitt from mitt
// 创建mitt实例
const emitter mitt()
// 导出
export default emitter在具体的组件实例中 A.vue
import emitter from /mitt.js
// 发布一个事件,并传递参数
emitter.emit(sendData, {name: David, age: 20})B.vue
import emitter from /mitt.js
// 发布一个事件,并传递参数
emitter.on(sendData, (param) {console.log(param)
})// main.js
import emitter from /mitt.js
app.config.globalProperties.$emitter emitter那么在vue3 setup 语法中
const { getCurrentInstance } from vue
const proxy getCurrentInstance() // 返回vue的实例
proxy.$emitter.on(foo, e console.log(e)) // 订阅事件
proxy.$emitter.emit(foo, {a: b}) // 发布事件除此之外mitt实例还有off(移除订阅) all(订阅所有事件) mittjs github官网 可自行了解
