Vue.js 指令和组件中的Vue事件侦听器优先级

有很多像

delete

这样的操作需要用户再次确认才能执行，我很累，每次都要重复确认作业，所以我尝试通过vue指令来实现

诸如此类：

Vue.directive("confirm", {
    bind(el, binding, vnode) {
        el._listener = function (e) {
            if(confirm(binding.value)){
                //do nothing,
            }else{
                e.stopImmediatePropagation();  // stop other events in this element
            }

        }
        el.addEventListener("click", el._listener)
    },
    unbind(el, binding, vnode) {
        el._listener && el.removeEventListener("click", el._listener) && (el._listener = null)
    }
});

//组成部分

<button v-confirm @click="delete()">Delete</button>

删除

但是，它不起作用。我发现当调用

confirm（）

时，组件中的

@click

绑定的事件侦听器还没有被调用

---

有没有办法解决这个问题？

在执行自定义指令中的

bind

hook函数时，获取组件上的click函数

Vue.directive（“确认”{
绑定（el、绑定、vnode）{
让handleFunction=binding.value
el._侦听器=函数（e）{
如果（确认（“您确定…”）{
//什么也不做，
警惕（“我肯定”）
handleFunction&&handleFunction（）
}否则{
e、 stopImmediatePropagation（）；//停止此元素中的其他事件
警报（“取消”）
}
}
el.addEventListener（“单击”，el.\u listener）
},
解除绑定（el、绑定、vnode）{
el._listener&&el.removeEventListener（“单击”，el._listener）&（el._listener=null）
}
});
新Vue({
el:“应用程序”，
方法：{
deleteHandle（）{
console.log（'delete'）
}
}
})

删除

我可以通过

binding.value

传递确认消息当然，您可以像

handleFunction（yesOrNo）