Блог

Я хочу создать директиву в Vue3 и использовать composition API. Я также хочу передать ссылку другому элементу как привязку к моей директиве. Итак, я написал следующий фрагмент кода:

 <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 ()) в директиву (привязка))?