vue 自定义指令点击事件比v-on执行的晚?

html

<el-button @click="initGetTreeList" v-track-event>测试</el-button>

v-track-event 自定义指令

  bind: function (el, binding, VNone) {
      //需要执行的事件
        el.onclick = function () {
          console.log('点击');
        }
        el.addEventListener('click', () => {
          console.log('点击2');
         }, true)
    }

元素事件

 initGetTreeList () {
    console.log('项目');
 }

打印的顺序

    项目中的`initGetTreeList`要比自定义指令走的快

如何实现自定义指令中的事件先走

回答:

元素在创建的时候会调用invokeCreateHooks方法,它会去遍历cbs.create中钩子函数进行执行,cbs.create中的钩子函数如下图所示共8个。

cbs.create

执行指令的updateDirectives函数在最后执行,而绑定事件的updateDOMListeners函数早于updateDirectives函数。

所以从vue源码上来说,自定义指令的点击事件是晚于v-on执行的。所以你只能另辟蹊跷了,比如你讲的利用冒泡把事件绑到父元素上,这样他就属于父元素的事件,子元素会优先于父元素冒泡事件。

回答:

楼上分析的很对,

我的建议是,你改造下自定义指令,把需要执行的业务函数 和当前业务函数需要的上下文,通过参数的形式传给指令。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注