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>

---