vue3在单个组件中实现类似mixin的事件调用
更新时间:2024年01月19日 15:11:40 作者:恍恍惚惚斯基
这篇文章主要为大家详细介绍了vue3如何在单个组件中实现类似mixin的事件调用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
简单的订阅发布功能
class MyDispatch {
constructor() {
this._dispatch_list = []
}
register_on(id, command_type, func) { // 注册事件
const dispatch_obj = { id, command_type, func: func }
this._dispatch_list.push(dispatch_obj)
}
register_off(id) { // 移除事件
this._dispatch_list = this._dispatch_list.filter(item => item.id !== id)
}
dispatch(command_type, data) { // 触发并执行事件,根据command_type区分类型
for (let i = 0; i < this._dispatch_list.length; i++) {
const dispatch_obj = this._dispatch_list[i]
if (command_type === dispatch_obj.command_type) {
dispatch_obj.func(data)
}
}
}
}
// 混入的代码
function testA(emits) {
const data = '执行成功咯!'
emits.dispatch('do', data)
}
// 组件代码
function mainTest() {
const emits = new MyDispatch()
emits.register_on('testB', 'do', testB)
testA(emits)
function testB(data) {
console.log('testB 执行,', data)
}
}
mainTest()
运行结果

this绑定
function testA() {
const data = '执行成功咯!'
const testB = this.testB
if (testB) {
testB(data)
}
}
function mainTest() {
const thisArg = {
testB: testB
}
testA.call(thisArg)
function testB(data) {
console.log('testB 执行,', data)
}
}
mainTest()
执行结果同上
到此这篇关于vue3在单个组件中实现类似mixin的事件调用的文章就介绍到这了,更多相关vue3 mixin内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下2024-02-02
TypeError:res.forEach is not a function报错解决办法
这篇文章主要给大家介绍了关于TypeError:res.forEach is not a function报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件详解
这篇文章主要介绍了Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08


最新评论