Vue 3指令处理程序不能作为基本指令工作

Question

我已经创建了一个指令，但我无法让它与"执行"；处理程序：以下是指令的创建方式：

vueApp.directive('click-outside', {
beforeMount(el, binding, vnode) {
el.clickOutsideEvent = (evt) => {
evt.stopPropagation();
if (!(el === evt.target || el.contains(evt.target))) {
binding.value(evt, el);
}
}
// Wait 1 frame otherwise a potential click that mounted the element will immediately trigger a click-outside event:
window.requestAnimationFrame(() => { document.addEventListener('click', el.clickOutsideEvent) });
},
unmounted(el) {
document.removeEventListener('click', el.clickOutsideEvent);
},
});

如果我添加一个处理程序，例如close将起作用(将调用关闭函数(：

<div v-if="opened" v-click-outside="close">
Some content
</div>

但如果我使用一点脚本，它就会失败：

<div v-if="opened" v-click-outside="opend = false">
Some content
</div>

或

<div v-if="opened" v-click-outside="close()">
Some content
</div>

这些给了我一个错误：Uncaught TypeError: binding.value is not a function

此行为适用于例如@click指令@click="opened = !opened"或@click="open()"因此，问题是我是否以及如何更改指令，使其在所有情况下都有效。

Answer 1

与v-bind不同，在呈现模板时会立即计算指令的绑定值。@vue/compiler-sfc将v-bind值中的表达式转换为一个函数，但您必须为自定义指令手动执行此操作：

<div v-if="opened" v-click-outside="() => opened = false">
Some content                    👆
</div>

<div v-if="opened" v-click-outside="() => close()">
Some content                    👆
</div>

演示