Vue3中如何在父组件通过setup()或＜script setup＞调用子组件方法使用$refs？

本文共计452个文字，预计阅读时间需要2分钟。

在Vue2中，使用ref属性可以获取子元素的引用，进而调用子元素的方法。例如：

在 vue2 中 ref 被用来获取对应的子元素，然后调用子元素内部的方法。

<template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { components: { TestComponent }, mounted () { // 调用子组件方法 this.$refs.TestComponent.show() } } </script>

在 Vue3 setup () {} 中使用 ref，如何获取到子元素，并调用方法：

<template> <!-- 子组件 --> <TestComponent ref="RefTestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' import { ref } from 'vue' import { nextTick } from 'process' export default { components: { TestComponent }, setup () { // 定义一个对象关联上子组件的 ref 值（注意：这里的属性名必须跟子组件定义的 ref 值一模一样，否者会关联失效） const RefTestComponent = ref(null) // 延迟使用，因为还没有返回跟挂载 nextTick(() => { RefTestComponent.value.show() }) // 返回 return { RefTestComponent } } } </script>

在 Vue3 <script setup> 中使用 ref，如何获取到子元素，并调用方法

<template> <!-- 子组件 --> <TestComponent ref="RefTestComponent"></TestComponent> </template> <script setup> // 导入子组件 import TestComponent from './TestComponent' import { ref } from 'vue' import { nextTick } from 'process' // 定义一个对象关联上子组件的 ref 值（注意：这里的属性名必须跟子组件定义的 ref 值一模一样，否者会关联失效） const RefTestComponent = ref(null) // 延迟使用，因为还没挂载 nextTick(() => { RefTestComponent.value.show() }) </script>

到此这篇关于Vue3父组件调用子组件方法（$refs在setup()、＜scriptsetup＞中使用）的文章就介绍到这了,更多相关Vue3父组件调用子组件内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！