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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vite+vue3中require is not defined问题及解决
这篇文章主要介绍了vite+vue3中require is not defined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
vue 基于abstract 路由模式 实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下2020-12-12
Vue中@keyup.enter @v-model.trim的用法小结
这篇文章主要介绍了Vue中@keyup.enter @v-model.trim的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12


最新评论