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实现简易计算器

    Vue实现简易计算器

    这篇文章主要为大家详细介绍了用Vue制作的简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Vue中组件之间传值的六种方式(完整版)

    Vue中组件之间传值的六种方式(完整版)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题,本文总结了 vue 组件间通信的几种方式,需要的朋友可以参考下
    2025-03-03
  • VUE实现一个Flappy Bird游戏的示例代码

    VUE实现一个Flappy Bird游戏的示例代码

    这篇文章主要介绍了VUE实现一个Flappy Bird的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vite+vue3中require is not defined问题及解决

    vite+vue3中require is not defined问题及解决

    这篇文章主要介绍了vite+vue3中require is not defined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vant Weapp组件踩坑:picker的初始赋值解决

    Vant Weapp组件踩坑:picker的初始赋值解决

    这篇文章主要介绍了Vant Weapp组件踩坑:picker的初始赋值解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue中格式化时间过滤器代码实例

    vue中格式化时间过滤器代码实例

    这篇文章主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue实现当前页面刷新的七种方法总结

    Vue实现当前页面刷新的七种方法总结

    大家在vue项目中当删除或者增加一条记录的时候希望当前页面可以重新刷新,但是vue框架自带的router是不支持刷新当前页面功能,所以本文就给大家分享了七种vue实现当前页面刷新的方法,需要的朋友可以参考下
    2023-07-07
  • Vue中@keyup.enter @v-model.trim的用法小结

    Vue中@keyup.enter @v-model.trim的用法小结

    这篇文章主要介绍了Vue中@keyup.enter @v-model.trim的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • vue打包添加gzip配置项方式

    vue打包添加gzip配置项方式

    这篇文章主要介绍了vue打包添加gzip配置项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论