【Vue.js】CompositionAPIにおける子コンポーネントのメソッドを親コンポーネントから扱う

Vue.jsのCompositionAPIで開発をしていて、親コンポーネントから呼び出している子コンポーネントのメソッドを親コンポーネントから扱いたいときがあり、一瞬あれ？っと思ったので残します。

今回の参考コードはこちら。

Children.vue

<template>
  <div :v-if="isActive">
    <slot />
  </div>
  <div :v-else>
    No Data!!
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isActive = ref(false);
const toggle = () => {
  if (!isActive.value) {
    isActive.value = true;
  } else {
    isActive.value = false;
  }
}

defineExpose({
  toggle,
});
</script>

Parent.vue

<template>
  <Children
    ref="children"
  >
    Hello!!!!
  </Children>
  <botton @click="onClick" />
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue';
const Children = defineAsyncComponent(() => import('./Children.vue'));

const children = ref();

const toggle = () => {
  children.value
}
<script>

関係性は Parent.vue から Children.vue を呼び出す関係です。

ポイントは Children.vue の defineExpose()、Parent.vue の ref="children", const children = ref() で、親コンポーネントの Parent.vue からrefで直接マウントしている Children.vue を呼び出し、メソッドを実行しています。

この時、Children,vue 側ではメソッドを外部から実行できるように defineExpose() で出力設定をしてあげなければいけません。

今回の例だと簡単すぎて親コンポーネントから子コンポーネントのメソッドを直接実行するメリットが分かりにくいですが、親コンポーネントで発火させるイベントの影響を子コンポーネントに対して疎結合で子コンポーネントに伝達させることができ、より抽象的な子コンポーネントを作成することができると思います。

では。