Vue3 父组件调用子组件方法 defineExpose

父组件代码：

<template>

  <div class="home">
    <HelloWorld ref="childRef"></HelloWorld>
    <button @click="getChild">触发子组件方法</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from "vue";
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    const childRef = ref();
    const getChild = () => {
      // 第三步： 调用子组件的方法或者变量，通过value
      childRef.value.doSth("随便传值！");
    }
    return{
      getChild,
      childRef
    }
  }
}
</script>

子组件代码：

<template>
  <div class="hello">
  </div>
</template>

<script>
import {defineExpose} from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    const doSth = () => {
      console.log("子组件的 doSth 方法执行了！");
    }
    defineExpose({doSth})
    return{
      doSth
    }
  }
}
</script>

注意事项：  一定要记得导出！！！