vue3で親コンポーネントで非同期処理が終わってから子コンポーネントの処理を行いたい時のメモ
#結論
親コンポーネントの処理が終わったらv-ifで子コンポーネントを有効にする。
親.vue
<template>
<子コンポーネント v-if="mount"/>
</template>
<script lang="ts">
export default {
setup() {
const mount = ref<boolean>(false)
親コンポーネントの非同期処理().then(() => mount.value = true)
return { mount }
}
}
</script>
#その他
・v-showは表示されていないだけでコンポーネントは生成されるため、非同期処理の完了を待たずに実行される。
・Vue3の新機能suspense
を使うとv-showと同じような動作となる。
・setup関数をasyncにして非同期処理をawaitにすると表示されない(親コンポーネントでsuspenseを使う必要がある?)