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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue + element实现动态显示后台数据到options的操作方法
最近遇到一个需求需要实现selector选择器中选项值options 数据的动态显示,而非写死的数据,本文通过实例代码给大家分享实现方法,感兴趣的朋友一起看看吧2021-07-07解决ant design vue 表格a-table二次封装,slots渲染的问题
这篇文章主要介绍了解决ant design vue 表格a-table二次封装,slots渲染的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10vue-cli脚手架build目录下utils.js工具配置文件详解
这篇文章主要介绍了vue-cli脚手架build目录下utils.js工具配置文件详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论