Vue.js自定义函数指令如何传递带参数的函数？

其实你并没有遗漏Vue文档里的内容，只是需要调整一下函数的传递方式和指令的调用逻辑就行，我给你整理几个直观的实战例子，一看就懂～

核心思路 #

你原来的指令是接收一个函数引用，然后在事件触发时调用它。如果要传递带参数的逻辑，主要有两种常用方式：一种是用箭头函数把参数绑定好再传递，另一种是直接传递表达式并在指令中执行。

实战示例（Vue 2） #

方式1：用箭头函数绑定参数（最省心，兼容原有指令） #

这种方式不需要修改你原来的指令代码，只需要在模板里用箭头函数把带参数的逻辑包起来就行：

组件代码

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

<script>
export default {
  // 不需要额外定义方法，直接在箭头函数里写带参数的逻辑
}
</script>

指令代码（和你原来的完全一样）

Vue.directive('sample', {
  bind: function(el, binding) {
    el.addEventListener('anyevent', () => {
      // 直接调用箭头函数，参数已经提前绑定好了
      binding.value()
    })
  }
})

如果你的逻辑比较复杂，也可以把带参数的逻辑封装到组件方法里，再用箭头函数传递：

<template>
  <custom-element v-sample="() => handleChange('test', true)" />
</template>

<script>
export default {
  methods: {
    handleChange(val, status) {
      this.$emit('change', val, status)
      // 这里可以加更多逻辑
    }
  }
}
</script>

方式2：直接传递表达式，在指令中执行 #

如果你想直接在指令绑定里写完整的表达式（比如$emit('change', 'test', true)），可以修改指令代码，通过组件实例来执行这个表达式：

组件代码

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

指令代码

Vue.directive('sample', {
  bind: function(el, binding, vnode) {
    el.addEventListener('anyevent', () => {
      // 通过vnode.context获取组件实例，执行绑定的表达式
      vnode.context.$eval(binding.expression)
    })
  }
})

Vue 3的适配写法 #

如果是Vue 3，指令的写法略有调整，但核心思路一样：

箭头函数方式（推荐） #

指令代码

const app = Vue.createApp({})
app.directive('sample', {
  mounted(el, binding) {
    el.addEventListener('anyevent', () => {
      binding.value()
    })
  }
})

组件模板

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

表达式执行方式 #

指令代码

const app = Vue.createApp({})
app.directive('sample', {
  mounted(el, binding) {
    el.addEventListener('anyevent', () => {
      // Vue 3用binding.get()来获取表达式的执行结果
      binding.get()
    })
  }
})

组件模板

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

总结一下，最直观且省心的方式就是用箭头函数把带参数的逻辑包起来传递，不需要修改原有指令代码，和你最初的写法完美兼容。

内容的提问来源于stack exchange，提问作者Hanan Mufti