将ref传递给指令绑定将导致“超出了最大递归更新”

问题描述

我想在Vue3中使用合成API创建指令。我还想将ref传递给另一个元素作为对我指令的绑定。因此，我编写了以下代码：

<template>
    <div class="content" v-context-menu="contextMenuElement">
        <SmartContextMenu ref="contextMenuElement" :items="[]" />
    </div>
</template>
// ...
<script>
//...
const contextMenuElement = ref(null)
//...
</script>

哪个使浏览器导致此错误：

已超过最大的递归更新

并且我已经通过这种方式更改了指令的绑定以修复错误：

<template>
    <div class="content" v-context-menu="() => contextMenuElement">
        <SmartContextMenu ref="contextMenuElement" :items="[]" />
    </div>
</template>
// ...
<script>
//...
const contextMenuElement = ref(null)
//...
</script>

因此，在指令生命周期中，我必须使用binding.value()而不是binding.value甚至是binding。
是否有更好的解决方案（将ref（ref（））传递给指令（绑定））？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）