烟台芝罘区住房建设局网站,资源网站怎样做,推广活动策划方案范文,网上政务服务平台入口Vue23全局事件总线
Vue2全局事件总线 功能#xff1a;可以解决所有组件之间通信传数据的问题原理#xff1a;通过一个共享对象#xff0c;将所有组件全部绑定到对象上#xff0c;即可通过这个对象实现组件与组件之间的传递数据#xff0c;而这个共享对象叫做全局事件…Vue23全局事件总线
Vue2全局事件总线 功能可以解决所有组件之间通信传数据的问题原理通过一个共享对象将所有组件全部绑定到对象上即可通过这个对象实现组件与组件之间的传递数据而这个共享对象叫做全局事件总线。
如何分清楚谁是发送方谁是接收方谁用绑定事件谁用触发事件
假设我向你传送数据我是发送方你是接收方。 若我不向你发送数据则你就不知道数据的内容无法拿取绑定。我不触发你不能绑定因为你没有数据只有我发送数据给你你才能知道数据的内容才能对数据进行拿取。谁发送谁触发谁拿取谁绑定
共享对象创建位置main.js文件
第一种方法创建vc对象
// 获取 VueComponent 构造函数
const VueComponentConstructor Vue.extend({})
// 创建 vc 对象
const vc new VueComponentConstructor()
// 使所有组件共享 vc 对象
Vue.prototype.$bus vc第二种方法常用使用原有的vm对象 在Vue初始化时beforeCreate创建共享对象vm
new Vue({el : #app,render: h h(App),beforeCreate(){// this指向的是vmVue.prototype.$bus this}
})以上代码中出现的$bus有什么作用
$bus事件总线用来管理总线。其他组件在调用vc共享对象时可通过this.$bus.$on() 和 this.$bus.$emit()来绑定或触发事件
数据发送方触发事件$emit
触发事件this.$bus.$emit(事件名, 接受的数据)
// Vip.vue
templatedivbutton clicktriggerEvent触发事件/button/div
/templatescriptexport default {name : Vip,data(){return{name : zhangsan}},methods : {triggerEvent(){this.$bus.$emit(event, this.name)}}}
/script数据接收方绑定事件$on
绑定事件this.$bus.$on(事件名, 回调函数)
// App.vue
templatedivVip/Vip/div
/templatescriptimport Vip from ./components/Vip.vueexport default {name : App,mounted() {this.$bus.$on(event, this.test)},methods : {test(name){console.log(name);}},components : {Vip}}
/scriptVue3全局事件总线
安装mitt
在CMD窗口中跳转到Vue3安装路径下输入命令npm i mitt当出现up to date in 595ms等类似信息表示安装成功
使用mitt只要使用全局事件总线所在的组件就要引入emitter
第一步创建一个文件夹utils在文件夹中创建js文件event-bus.js第二步在js文件中导入并暴露mitt如下 这里的操作主要是为了生成对象emitter
// utils/event-bus.js
import mitt from mitt// mitt函数的执行会生成一个对象emitter对象
// emitter对象是一个全局事件总线对象
// 绑定和触发的操作都在这个对象上的完成
export default mitt()实现绑定与触发事件
绑定事件emitter.on(事件名, 回调函数)触发事件emitter.emit(事件名, 接收的数据)
// App.vue
templateInfo/Info
/templatescript// 引入全局事件总线对象import emitter from ./utils/event-bus.jsimport Info from ./components/Info.vue// 引入组合式API生命周期钩子import { onMounted } from vueexport default {name : App,components : {Info},setup(){// 生命周期钩子onMountedonMounted(() {// 绑定事件emitter.on(event1, showInfo)})function showInfo(info){alert(姓名${info.name})}return {showInfo}}}
/script// Info.vue
templatebutton clicktriggerEvent1触发event1事件/button
/templatescript// 导入全局事件总线对象import emitter from ../utils/event-bus.jsexport default {name : Info,setup(){function triggerEvent1(){// 触发事件emitter.emit(event1, {name:jack})}return {triggerEvent1}}}
/script解绑事件
原理在子组件中使用 off 可以消除指定的事件解绑事件emitter.off(事件名)
// Info.vue
templatebutton clicktriggerEvent1触发event1事件/buttonbrbutton clickclearEvent1解绑event1事件/button
/templatescript// 引入入全局事件总线对象import emitter from ../utils/event-bus.jsexport default {name : Info,setup(){function triggerEvent1(){// 触发全局事件总线上的事件emitter.emit(event1, {name:jack})}function clearEvent1(){// 解绑指定的事件emitter.off(event1)}return {triggerEvent1, clearEvent1}}}
/scriptVue2和Vue3在触发和绑定上的不同
第一点引用的方式不同
// Vue2 的 main.js
new Vue({el : #app,render: h h(App),beforeCreate(){Vue.prototype.$bus this}
})// Vue3 的 utils/event-bus.js
import mitt from mitt
export default mitt()第二点调用方式的不同
// Vue2
绑定this.$bus.$on(事件名, 回调函数)
触发this.$bus.$emit(事件名, 接受的数据)
解绑this.$bus.$off(事件名)// Vue3 需要先引入 import emitter from ../utils/event-bus.js
绑定emitter.on(事件名, 回调函数)
触发emitter.emit(事件名, 接收的数据)
解绑emitter.off(事件名)
JavaScript
// Vue2
绑定this.$bus.$on(事件名, 回调函数)
触发this.$bus.$emit(事件名, 接受的数据)
解绑this.$bus.$off(事件名)// Vue3 需要先引入 import emitter from ../utils/event-bus.js
绑定emitter.on(事件名, 回调函数)
触发emitter.emit(事件名, 接收的数据)
解绑emitter.off(事件名)
