はじめに

親コンポーネントに定義したメソッドを子コンポーネントから呼び出すのはよく見かける気がするのですが、逆はあまりないので、記録しておきます。

環境

Vue.js 3.2
Composition API

サンプル

子コンポーネント

Child.vue

<script setup>
const childMethod = () => {
    console.log("childコンポーネントのメソッド")
}

// defineExposeを使い、親コンポーネントからの呼び出しを可能にする
defineExpose({ childMethod });
</script>

親コンポーネント

Parent.vue

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

// 子コンポーネントの情報を受け取る
const childRef = ref();

const onClick = () =>  {
    // 子コンポーネントのメソッドを呼び出す
    childRef.value.childMethod();
}
</script>

<template>
    <Child ref="childRef" />
    <button @click="onClick()">ボタン</button>
</template>

クリック時ではなく、マウント時に子コンポーネントのメソッドを呼び出したい場合は以下のようにします。

Parent.vue

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

// 子コンポーネントの情報を受け取る
const childRef = ref();

onMounted(() => {
    childRef.value.childMethod();
})
<script>
<template>
    <Child ref="childRef" />
</template>

おわりに

公式サイトのdefineExposeのサンプルが簡素だったので困りましたが、以下の参考サイトのおかげで助かりました。

今回書いたサンプルも誰かの役に立てばと思い、簡単ではありますが残しておきます。

参考にさせていただいたサイト