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>

阻止单击指令除了将捕获的事件侦听器添加到窗体-item之外什么也不做，这会停止传播，到目前为止一切都很顺利，但问题是窗体-item有一个伪子元素，该元素由css在选择器之后添加。因此，当我单击伪子元素时，由于伪子元素本身不会分派单击事件而不是form-item，所以form-item元素仍然会分派事件，而且vue内置指令@click事件处理程序首先被绑定，这导致addEventListener方法的useCapture参数无效。

在1.x版本中，有自定义指令的优先级选项，但在2.X版本中删除了它。那么，有没有比内置@click更好的方式来绑定我的自定义指令呢？

Answer 1

你应该使用Vue内置的事件修饰符(引用here)。试试这个：

<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();
    }
}