我如何在多个指令挂钩中重用一个函数？

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

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

我如何在多个指令挂钩中重用一个函数？

How can i re-use a function across multiple directive hooks?

vue.js

vuejs2

vue-directives

选项 1：单独的指令变量

选项 2：分离功能