在 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()、＜script setup＞ 中使用）的文章就介绍到这了,更多相关Vue3 父组件调用子组件内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！