如何跨多个指令挂钩重用函数？

Question

我有一个指令可以更新元素在其内容更改时的外观。因此，我需要它在其原生 change 事件触发时以及首次设置元素时运行。所以我在bind 钩子和componentUpdated 钩子中运行我的函数。

所以它的结构看起来像这样：

directives: {
    demo: {
        bind(el) {
            el.addEventListener('change', () => {
                alert('i am a directive function');
            });
        },

        componentUpdated(el) {
            alert('i am a directive function');
        }
    }
}

它工作正常，但我必须在两个钩子声明中复制并粘贴函数，我想摆脱它。

我想也许指令声明可以有它的本地属性，可以通过this 访问，所以我尝试这样解决它：

directives: {
    demo: {
        myFunction: () => {
            alert('i am a directive function');
        },

        bind(el) {
            el.addEventListener('keyup', () => this.myFunction());
        },

        componentUpdated(el) {
            this.myFunction();
        }
    }
}

但这不起作用，说this.myFunction 不是一个函数。

我将如何进行这项工作？

Answer 1

选项 1：单独的指令变量

在自己的变量中定义指令，该变量可以通过名称而不是this引用：

// MyComponent.vue
const myDirective = {
  myFunction(msg) {
    console.log(msg)
  },
  bind(el, { value }) {
    el.addEventListener('keyup', () => myDirective.myFunction(value))
  },
  componentUpdated(el, { value }) {
    myDirective.myFunction(value)
  }
}

export default {
  directives: {
    myDirective
  }
}

demo 1

选项 2：分离函数

从指令外部定义通用函数，并在需要的地方使用：

// MyComponent.vue
function myFunction(msg) {
  console.log(msg)
}

export default {
  directives: {
    myDirective: {
      bind(el, { value }) {
        el.addEventListener('keyup', () => myFunction(value))
      },
      componentUpdated(el, { value }) {
        myFunction(value)
      }
    }
  }
}

demo 2

在以上两个示例中，指令都可以移动到它们自己的文件中，这将增加它们的可测试性并提高组件的可读性。