VUE指令的优先级

Question

我使用了尚未禁用道具的第三方组件库的表单组件，并且我通过@Click将单击事件绑定到每个表单项目时，在表单时弹出对话框单击项目。但这是我的问题，在某些情况下，表单项目不应单击，因此我创建了一个自定义的预防单击指令：

const clickHandler = e => {
  e.stopImmediatePropagation()
  e.stopPropagation()
  return false
}
const directive = {
  bind(el, { value }) {
    if (value) {
      el.addEventListener('click', clickHandler, true)
    }
  },
  update(el, { value }) {
    if (!value) {
      el.removeEventListener('click', clickHandler, true)
    } else {
     el.addEventListener('click', clickHandler, true)
    }
  }
}

这样使用：

<form-item v-prevent-click="true" @click="showDialog"></form-item>

"预防单击指令"除了添加一个捕获的事件侦听器，以阻止繁殖，到目前为止一切顺利，但问题是form-item有一个伪造的儿童元素由CSS选择后。因此，当我单击伪子元素时，由于伪子元素本身不会派遣点击事件，而不是form-item，因此，除了VUE内置指令@Click Event之外处理程序首先是绑定的，这导致AddeventListener方法的Usecapture参数不会影响。

在1.x版本中，自定义指令有优先选项，但是2.x将其删除。因此，无论如何，是否有比内置@Click之前的自定义指令绑定？

Answer 1

您应该使用Vue的内置事件修饰符（在此处引用）。尝试以下操作：

<form-item @click.stop.prevent="showDialog"></form-item>

我不知道您的第三方组件框架是什么，但是如果您确实需要自己处理preventDefault，我建议您进行以下操作：

模板

<form-item @click="showDialog"></form-item>

脚本

methods: {
    showDialog(e) {
        e.preventDefault();
        // Your code to display dialog...
    }
}

如果您还需要将参数传递给showDialog，请记住您可以 - 只需将事件作为第一个参数传递：

<form-item @click="showDialog($event, urData)"></form-item>

Answer 2

考虑将标志传递给showDialog。如果您无法修改showDialog功能将其包装在另一个功能中：

// Your compoennt template
<form-item @click="wrappedShowDialog(true)"></form-item>
// Vue.js component
wrappedShowDialog(isAllowed) {
    if (isAllowed) {
        this.showDialog();
    }
}