vue3 defineComponent setup中父组件通过Ref调用子组件的方法

### Vue 3 中父组件通过 Ref 调用子组件的方法

在 Vue 3 组合式 API 下，`defineExpose` 可用于控制暴露给父组件的内容。这使得父组件可以通过 `ref` 访问特定的属性或方法。

#### 使用 `defineExpose`

为了使父组件能够访问子组件内部定义的方法，在子组件中需显式声明要暴露出去的对象。默认情况下，除了由 `setup()` 返回的对象外的一切都不会被公开[^1]。

// ChildComponent.vue
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: "ChildComponent",
  setup() {
    const childMethod = () => {
      console.log('This is called from parent');
    };

    // Expose only the methods or properties you want to be accessible by the parent component.
    return {
      ...,
      childMethod
    };
    
    // Alternatively using defineExpose for better clarity and control over what gets exposed
    defineExpose({childMethod});
  }
})

#### 父组件调用子组件方法

一旦子组件指定了哪些部分可以被外界访问，则可以在父级模板里利用 `ref` 属性来创建对该实例的一个引用，并随后在其上执行这些已公布的操作[^2]。

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <!-- Assigning reference to child component instance -->
    <ChildComponent ref="myChild"/>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script lang="ts">
import { onMounted, ref as createRef } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    let myChild = createRef();

    function callChildMethod(){
        if(myChild.value){
            myChild.value.childMethod();
        }
    }

    onMounted(() => {});

    return {
      myChild,
      callChildMethod
    };
  }
};
</script>

上述代码展示了如何在一个简单的按钮点击事件处理器内调用了来自 `<ChildComponent>` 的函数。注意这里假设已经正确设置了 TypeScript 支持；如果是纯 JavaScript 开发环境则不需要指定类型。