Vue使用v-click-outside传参时报binding.value is not a function错误

报错根因 #

自定义指令的binding.value获取的是指令绑定表达式的最终执行结果。传参时如果直接在指令上写带括号的函数调用（比如v-click-outside="handleClick('test')"），组件渲染阶段会立刻执行该函数，把函数返回值赋值给binding.value。原有指令实现默认binding.value是函数类型，一旦返回值不是函数，执行binding.value(evt, el)时就会抛出TypeError: binding.value is not a function错误。

原有自定义指令实现代码如下：

vue_app.directive('click-outside', {
    beforeMount(el, binding, vnode) {
        el.clickOutsideEvent = evt => {
            evt.stopPropagation()
            if (!(el === evt.target || el.contains(evt.target))) {
                binding.value(evt, el)
            }
        }
        // 延迟一帧绑定，避免挂载元素时的点击事件误触发外部点击逻辑
        window.requestAnimationFrame(() => {
            document.addEventListener('click', el.clickOutsideEvent)
        })
    },
    unmounted(el) {
        document.removeEventListener('click', el.clickOutsideEvent)
    },
});

正确传参方案 #

方案1：模板侧用箭头函数包裹（无需修改指令源码） #

传参时不要直接执行业务回调，而是用箭头函数返回一个新函数作为binding.value，通过闭包保存自定义参数，触发外部点击时实际执行箭头函数，内部再调用业务逻辑即可，完全兼容原有指令实现。

模板写法示例：

<template>
  <!-- 错误写法：直接执行函数，binding.value拿到的是函数返回值，非函数类型 -->
  <!-- <div v-click-outside="handleClose('dropdownMenu')">下拉菜单</div> -->

  <!-- 正确写法：箭头函数包裹，binding.value拿到的是函数本身 -->
  <div v-click-outside="(evt, el) => handleClose('dropdownMenu', evt, el)">
    下拉菜单内容
  </div>
</template>

<script setup>
// 业务回调，可接收自定义参数+指令注入的事件对象、绑定元素
const handleClose = (menuName, evt, el) => {
  console.log('触发外部点击，关闭目标：', menuName)
  // 对应业务逻辑，比如控制菜单显隐
}
</script>

方案2：改造指令支持对象格式传参 #

如果不想在模板里写箭头函数，可以改造指令源码，兼容两种绑定格式：直接传函数、传带处理函数和自定义参数的配置对象，适配更多使用场景。

改造后的指令代码：

vue_app.directive('click-outside', {
    beforeMount(el, binding) {
        el.clickOutsideEvent = evt => {
            evt.stopPropagation()
            if (!(el === evt.target || el.contains(evt.target))) {
                // 兼容两种传参模式
                let handler, customParams = []
                if (typeof binding.value === 'function') {
                    handler = binding.value
                } else {
                    handler = binding.value.handler
                    customParams = binding.value.params || []
                }
                // 传入事件对象、绑定元素，再展开自定义参数
                handler(evt, el, ...customParams)
            }
        }
        window.requestAnimationFrame(() => {
            document.addEventListener('click', el.clickOutsideEvent)
        })
    },
    unmounted(el) {
        document.removeEventListener('click', el.clickOutsideEvent)
    },
});

改造后支持两种使用方式：

<template>
  <!-- 无自定义参数场景：直接绑定函数，和原用法完全兼容 -->
  <div v-click-outside="handleSimpleClose">普通弹窗</div>

  <!-- 带自定义参数场景：传配置对象 -->
  <div v-click-outside="{
    handler: handleComplexClose,
    params: ['editModal', { autoSave: true }]
  }">
    编辑弹窗
  </div>
</template>

注意：使用对象格式传参时，必须传入handler字段指定回调函数，否则依然会触发类型错误。

内容的提问来源于stack exchange，提问作者Umer Rasheed