vue3父组件获取子组件的实例对象

本文主要是介绍vue3父组件获取子组件的实例对象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一，ref

在父组件的模板里，对子组件的标签定义ref属性，并且设置属性值，在方法里获取ref()获取实例对象。

父组件：

<template><div ><div>我是父组件</div><<SonCom ref="sonComRef"></SonCom> </div>
</template>
<script setup lang='ts'>import SonCom from '@/components/SonCom.vue';  // 引入子组件import { ref } from 'vue';// 获取子组件实例let sonComRef = ref()  // 这里变量必须跟ref属性定义的值一致// 必须加载完成组件后，再去获取实例onMounted(() =>{console.log(sonComRef.value.msg)    // 我是暴露出去的子组件数据sonComRef.value.fun()  // 我是暴露出去的子组件方法})
</script>

---

二，defineExpose

子组件引入defineExpose，在通过defineExpose暴露出去数据和方法

子组件：

<template><div ><div>我是子组件</div></div>
</template>
<script setup lang='ts'>import { ref， defineExpose } from 'vue';let msg = ref<string>('我是暴露出去的子组件数据')let fun = () => {console.log('我是暴露出去的子组件方法');}defineExpose({msg,fun}) 
</script>

---

这篇关于vue3父组件获取子组件的实例对象的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---