Zenn
👨‍👩‍👧‍👦

Composition API script setup において子コンポーネント内に実装している関数を親コンポーネント内で呼び出す実装

2022/01/24に公開
TypeScript
Vue.js
Vue 3
tech

Vue2 の this.$refs.hoge.onHogeVoid のような子コンポーネント内の関数を呼び出す宣言が Vue3 では、ひと手間増えたので記事にしました。

子コンポーネント側の実装

script setup 内はこのような実装

Child.vue
<script setup lang="ts">
// 子コンポーネントで受け取る Props の型を宣言しています。
type Props = {
    value: string;
};

// 子コンポーネントで受け取る Props を宣言しています。
const { value } = defineProps<Props>();

// defineExpose に宣言したい関数を実装しています。
const childMethod = (): void => {
    console.log(`子コンポーネントの value に ${value} が Props で渡されいます。`);
};

// defineExpose を使用してコンポーネント内に定義されたメソッドを親コンポーネントから参照できる様にしています。
defineExpose({
    childMethod,
});
</script>

template 側の実装

Child.vue
<template>
    <div>
        {{ value }}
    </div>
</template>

親コンポーネント側の実装

script setup 内はこのような実装

App.vue
<script setup lang="ts">
import { ref } from 'vue';
import Child from './components/Child.vue';

// 子コンポーネント側のコンポーネント情報を受け取る ref を宣言しています。
const childRef = ref();

// 子コンポーネント側に渡す props を宣言しています。
const childValue = "Hello, Zenn";

// 子コンポーネント側のメソッドを発火させるメソッドを実装しています。
const onChildMethodClick = () => {
    childRef.value.childMethod();
};
</script>

template 側の実装

App.vue
<template>
    <div>
        <!-- Child コンポーネントに ref の childRef を付与します。 -->
        <Child ref="childRef" :value="childValue" />
        <button @click="onChildMethodClick">子コンポーネント内のメソッドを呼び出す</button>
    </div>
</template>

実際に、実装をすると以下のような形で動きます。

補足

子コンポーネントで受け取る Props を宣言ですが、 Vue2 系の Composition API を使う際は以下の様に記述する必要があります。

Child.vue
// 子コンポーネントで受け取る Props を宣言しています。
const props = defineProps<Props>();

// defineExpose に宣言したい関数を実装しています。
const childMethod = (): void => {
    console.log(`子コンポーネントの value に ${props.value} が Props で渡されいます。`);
};

今回サンプルで実装したコードは、 vue3-define-expose-example よりクローン可能です。

参考文献

defineExpose

Discussion