javascript 在Vue组合函数中获取模板引用

vlju58qv 于 2022-12-17 发布在 Java

关注(0)|答案(1)|浏览(128)

我需要在Nuxt项目中的Vue组合函数中获取模板引用。
我的模板是：

// /components/Component.vue

<template>
  <div ref="element">
    ...
  </div>
</template>

我试图通过在可组合函数上声明来获取ref：

// /composables/useComposable.js

export const useComposable = () => {
  const element = ref(null)
  ...
}

我还尝试在设置中声明它：

// /components/Component.vue

<script setup>
const element = useRef(null)

useComposable(element.value)
</script>

它在两种情况下都不起作用。它只在第二种情况下起作用，但前提是我把useComposable Package 在onMounted钩子中。有没有可能不使用onMounted钩子就得到结果？

JavaScript

来源：https://stackoverflow.com/questions/74826052/get-template-ref-in-vue-composable-function

1条答案

按热度按时间

9nvpjoqh1#

传入ref本身，而不是.value，你失去了与它的React性，当你把它放进可组合对象时，它仍然是null。
可组合：

export const useComposable = (element: Ref<HTMLDivElement>) => {
    //use it with element.value in here
}

组件：

<script setup>
import { ref } from 'vue'

const element = ref(null)
useComposable(element)
</script>
<template>
  <div ref="element">
    ...
  </div>
</template>

赞(0）回复(0）举报 2022-12-17

我来回答

javascript 在Vue组合函数中获取模板引用

1条答案

相关问题

热门标签

最新问答