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在这种情况下，您可以使用which应该是一个函数。它已经预先绑定好正确的上下文，因此只需调用它即可（如果需要，可以在其中传递任何内容）：

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