Vue3复合API -访问子ref.

Question

我正在尝试使用Vue3组合API访问子组件中的ref，但我不确定如何这样做。我想添加一个滚动事件到mainContentRef，所以我可以做一个抓取请求，在父组件内抓取更多的数据，但我似乎无法访问父组件中的ref来添加事件监听器

这是我的代码(由于在这个例子中没有必要删除了一些部分):

<!-- MAIN COMPONENT -->
<template>
<PageWrap>
<template v-slot:content>
<MainContent>
<template v-slot:content />
</MainContent>
</template>
</PageWrap>
</template>
<script setup>
//access mainContentRef here because this is where the fetch request will be
</script>

<!-- MAIN CONTENT COMPONENT -->
<template>
<div id="main-content" ref='mainContentRef'>
<slot name='content'></slot>
</div>
</template>
<script setup>
import { defineProps, ref } from 'vue';
const mainContentRef = ref(0);
</script>

Answer 1

您可以利用value的defineExpose方法，然后为您的MainContent组件添加ref并通过该组件访问它。

<!-- MAIN COMPONENT -->
<template>
<PageWrap>
<template v-slot:content>
<MainContent ref="mainContentComponent">
<template v-slot:content />
</MainContent>
</template>
</PageWrap>
</template>
<script setup>
const mainContentComponent = ref()

// Now you can do:
mainContentComponent.value.mainContentRef.value
</script>

<!-- MAIN CONTENT COMPONENT -->
<template>
<div id="main-content" ref="mainContentRef">
<slot name='content'></slot>
</div>
</template>
<script setup>
import { ref } from 'vue'

const mainContentRef = ref(0)

defineExpose({
mainContentRef
})
</script>

参见:https://vuejs.org/guide/essentials/template-refs.html#ref-on-component

让我知道如果你有任何问题或它不能工作，很高兴帮助!

Answer 2

你可以试试:

<!-- MAIN CONTENT COMPONENT -->
<template>
<div id="main-content" ref='mainContentRef'>
<slot name='content'></slot>
</div>
</template>
<script setup>
import { defineProps, ref } from 'vue';
const mainContentRef = ref(null);
// Now you can do:
mainContentRef.value.children[0]
</script>