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()
で出力設定をしてあげなければいけません。
今回の例だと簡単すぎて親コンポーネントから子コンポーネントのメソッドを直接実行するメリットが分かりにくいですが、親コンポーネントで発火させるイベントの影響を子コンポーネントに対して疎結合で子コンポーネントに伝達させることができ、より抽象的な子コンポーネントを作成することができると思います。
では。