VueJS 自定義指令函數作為參數

Question

我有一個簡單的指令：

HTML：

<div id="app">
  <div v-sample:callback="greet"></div>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      files: [],
    },
    methods: {
      greet: function (arg) {
        alert(arg);
      },
    },
  });
</script>

JS：

Vue.directive('sample', {
  bind: function (el, binding, vnode) {
    el.addEventListener('...', function () {
      // ...
      callback.call(arg, ...);
    });
  },
});

但是，我不清楚獲取函數和評估的適當語法。 在指令中執行此操作的正確方法是什么？

Answer 1

您可以使用binding.value在這種情況下應該是一個函數。 它已經預先綁定到正確的上下文，所以只需調用它（如果需要，請在其中傳遞任何內容）：

Vue.directive('sample', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      binding.value()
    });
  },
});

Answer 2

也許你可以這樣做。

<div v-mydirect:fn="params"></div>

Vue.directive('mydirect', {
    bind (el, binding,vnode) {
        let that = vnode.context
        that[binding.arg](binding.value)
    }
})