javascript - 在自定义函数指令中添加带有 args 的内联函数

Question

这就是我在 Vue.js 中创建自定义函数指令的方式：

<custom-element v-sample="doSomething" />

export default {
  ...
  methods: {
   doSomething() { 
    // do magic
   }
  }
}

指令代码如下所示：

Vue.directive('sample', {
 bind: functrion(el, binding) {
  el.addEventHandler('anyevent', () => {
   return binding.value()
  })
 }
})

现在我想要实现的是，使用这样的参数传递函数：

<custom-element v-sample="$emit('change', 'test', true)" />

在 Vue 文档中有什么我错过阅读或观看的内容吗？任何直观的方式与现实世界的例子？

Answer 1

我希望我对您的理解正确，但这可能是您想要的一些样板：

Vue.directive('demo', function (el, binding) {
  // Add any event listener here that you want
  el.addEventListener('touchstart', () => {
    // Execute the function bound to the directive
    binding.value()
  })
})

const app = new Vue({
  el: '#app',
})

和模板：

<div id="app">
  <h1 v-demo="() => {alert('hello')}">Click me for alert</h1>
</div>

或者在你的情况下：

<custom-element v-demo="() => {this.$emit('change', 'test', true)}" />