Nuxt 3 - 从布局获取引用到组件

Question

通过引用包含该组件的布局中的 div 来在组件中 getBoundingClientRect （这里我使用 vueuse）的正确方法是什么？我尝试了各种配置，但总是给我带来各种错误

布局 > html:

<footer ref="footergrid">
    <some-other-component />
</footer>
<child-comp />

布局 > 脚本

<script setup>
const footergrid = ref()
provide(footergrid)
</script>

child-comp.vue：

<script setup>
import { useElementBounding } from '@vueuse/core'
const extfootergrid = inject('footergrid')
const footergrid = reactive(useElementBounding(extfootergrid))
console.log(footergrid)
</script>

错误：未捕获（承诺中）类型错误：element.getBoundingClientRect 不是函数

Answer 1

Vue 内置函数

provide()

接受两个参数 - 一个注入键（主要是一个字符串），然后是值。所以你应该像这样使用它：

provide('footergrid', footergrid)

正确地传递值。