vue3 跨组件使用$refs

在Vue3中，跨组件使用$refs的方式与Vue2略有不同。在Vue3中，通过ref()函数来获取组件的引用，并通过.value来访问组件的属性或方法。具体步骤如下：

1. 在父组件中，使用ref()函数创建一个ref对象，例如：const childRef = ref(null)。

2. 在子组件的template中，给需要引用的元素或组件添加ref属性，例如：<ChildComponent ref="childRef" />。

3. 在父组件的setup()函数中，通过toRef()函数将子组件的引用赋值给父组件的ref对象，例如：childRef.value = toRef(this.$refs, 'childRef')。

4. 父组件就可以通过childRef.value来访问子组件的属性或方法了。

需要注意的是，跨组件使用$refs时，父组件必须等到子组件被渲染后才能获取到正确的引用。可以在父组件的mounted()钩子函数中使用nextTick()来确保获取到正确的引用。例如：this.$nextTick(() => { childRef.value.doSomething() })。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue 父组件通过$refs获取子组件的值和方法详解](https://download.csdn.net/download/weixin_38632624/12932506)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue 解决通过this.$refs来获取DOM或者组件报错问题](https://download.csdn.net/download/weixin_38728464/13128717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue整合SSM项目实战](https://download.csdn.net/download/m0_55755339/88241603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]