vue3+ts 使用ref让父组件调用子组件

父组件调用子组件的方法

子组件<page>
<script lang="ts">
  setup(props) {
    const getPageData = () => {
      console.log('11')
    }
     return { getPageData }
  }
</script>  

父组件想要使用子组件的 getPageData() 方法，需要使用ref

父组件
<template>
  <div class="user">
    <page ref='pageRef'></page> //需要在子组件上绑定ref，ref同名
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
  setup() {
  //InstanceType<typeof page> 可以获取page拥有构造函数的实例
    const pageRef = ref<InstanceType<typeof page>>()
    //const pageRef= ref() 也可以调用子组件实例，但是使用 InstanceType<typeof page> 能判断调用的方法是否在子组件定义
    page.value?.getPageData()
    return{ pageref } //一定要将pageRef返回
  }
</script>

使用 <script setup></script>的组件，这个组件是默认关闭的，外界取不到子组件的内容。需要在子组件使用defineExpose()导入想要在父组件中使用的内容。 当我们想要打印console.log(~.value)时，需要在onMount()生命周期之后才可以通过.value访问到子组件暴露出来的内容。