Vue3 中如何從 Parent 呼叫 Child Component 的 Method？

最近在開發專案時，遇到了一個問題：如何從父元件呼叫子元件的方法，尤其是在 Vue3 中。每當我需要實作這個功能時，總是容易忘記該使用哪種方式：是使用 Options API，還是使用 Composition API？而且，每種方式在呼叫上也有微妙的差異。因此，我特別寫下這篇文章，記錄下來作為日後的參考，以免再次浪費時間在尋找解答上。

程式範例

Options API

如果你曾經開發過 Vue2，使用 Options API，對你來說應該會比較熟悉一點。
以下是一個使用範例：

<script>
import ChildComponent from 'path/to/child-component.vue'

export default {
  name: 'ParentComponent',

  components: {
    ChildComponent
  },

  setup() {
    // do something
  },

  methods: {
    callChildComponentMethod() {
      this.$refs.childComponentRef.childComponentMethod()
    }
  }
}
</script>

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
  </div>
</template>

child

<script>
  export default {
    name: 'ChildComponent',

    setup() {
      // do something
    },

    expose: ['childComponentMethod'], // 沒有使用預設全部 methods 都會是 public

    methods: {
      childComponentMethod() {
        // do something
      }
    }
  }
</script>

Composition API

Composition API 在 Vue3 中第一次採用這種寫法，算是比較新潮的一種寫法，在使用上可能會需要一點轉換成本

<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";

const childComponentRef = ref(null);

function handleClick() {
  childComponentRef.value.doSomething();
}

</script>

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
  </div>
</template>

child

<script setup>
import { defineExpose } from "vue";

function doSomething() {
  console.log("doSomething");
}
// defineExpose 將需要的 method public 出去
defineExpose({
  doSomething,
});
</script>

參考資料

https://vuejs.org/api/options-state.html#expose
https://vuejs.org/api/sfc-script-setup.html#defineexpose