为什么多次使用相同的 vue 指令会在所有这些上调用更新？答案

【问题标题】：Why does using the same vue directive multiple times call updates on all of them?为什么多次使用相同的 vue 指令会在所有这些上调用更新？
【发布时间】：2018-10-12 03:02:43
【问题描述】：

我创建了一个 vue 指令，将其附加到同一页面上的多个输入元素，并注意到当我开始输入其中一个元素时，页面中的所有元素都会触发“更新”事件。对于我更新的特定元素，我原本预计只有一个事件。

我的问题是，有没有办法阻止事件触发或过滤事件以便我只能处理正在更改的输入？

这是我的指令和视图的代码：

Vue.directive('test', {
  bind: (el) => {
    console.log(el.id + " bound")
  },
  update: (el) => {
    console.log(el.id + " updated")
  }
})

new Vue({
  el: "#app",
  data: {
    testval1: null,
    testval2: null,
  },
  methods: {
  }
})

和模板：

<div id="app">
  <input id="testinput1" v-model="testval1" v-test />
  <input id="testinput2" v-model="testval2" v-test />
</div>

这是问题的 JSFiddle：https://jsfiddle.net/eywraw8t/415288/

在这个 JSFiddle 中，您可以在控制台中看到，如果您在输入字段中键入内容，则会触发两个输入字段的更新。

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

我认为最好的方法是使用绑定。您的指令将有一个指令适用于指定 v-test 指令的每个元素。这是解决您问题的简单方法

Vue.directive('test', {


  bind: (el) => {
    console.log(el.id + " bound")
    const handler = (e) => {
        console.log('e', e.target)
      if (el == e.target) {
        console.log(el.id + " firing")
      }
    }
    el.vueTest = handler
    // add Event Listeners
    document.addEventListener('input', handler)
  },
  unbind (el, binding) {
    // Remove Event Listeners
    document.removeEventListener('input', el.vueTest);
    el.vueTest = null;
  }
})

希望对你有帮助:)

【讨论】：

【解决方案2】：

您可以将元素存储在bind 上并在update 上检查它，如下所示：

Vue.directive('test', (() => {
  let element;
  return {
    bind(el) {
      element = el;
      console.log(el.id + " bound");
    },
    update(el) {
      if (element === el) {
        console.log(el.id + " updated");
      }
    },
  };
})());

【讨论】：