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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何在vuejs项目中使用md5加密密码的实现

    如何在vuejs项目中使用md5加密密码的实现

    本文主要介绍了如何在vuejs项目中使用md5加密密码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • uniApp h5项目如何通过命令行打包并生成指定路径及文件名称

    uniApp h5项目如何通过命令行打包并生成指定路径及文件名称

    用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下
    2024-02-02
  • 教你在vue项目中使用svg图标的方法

    教你在vue项目中使用svg图标的方法

    本文给大家介绍了在vue项目中使用svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-04-04
  • 将 vue 生成的 js 上传到七牛的实例

    将 vue 生成的 js 上传到七牛的实例

    本篇文章主要介绍了将 vue 生成的 js 上传到七牛的实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue如何由本地js中存放的url地址获取图片

    Vue如何由本地js中存放的url地址获取图片

    这篇文章主要介绍了Vue如何由本地js中存放的url地址获取图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • TypeError:res.forEach is not a function报错解决办法

    TypeError:res.forEach is not a function报错解决办法

    这篇文章主要给大家介绍了关于TypeError:res.forEach is not a function报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue自定义指令详细

    Vue自定义指令详细

    这篇文章主要介绍了Vue自定义指令,文章从背景开始详细介绍Vue自定义指令的详细内容,随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下
    2021-11-11
  • Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件详解

    Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件详解

    这篇文章主要介绍了Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue实现动态添加元素(可删除)

    vue实现动态添加元素(可删除)

    文章介绍了如何在Vue中动态添加和删除元素,通过使用Vue的响应式数据和v-for指令,可以轻松地实现这一功能,文章还详细讲解了如何处理元素的添加和删除事件,以及如何更新视图以反映这些变化
    2024-12-12
  • vue.js 表格分页ajax 异步加载数据

    vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论