はじめに

今回は、Vue.jsで親コンポーネントで、ある処理が終わったタイミングで子コンポーネントを有効にする方法を備忘録も兼ねてまとめます。

もっと良い方法があるよって方はぜひコメント欄で教えていただけると幸いです。

実現したいこと

親コンポーネントでmounted内で非同期処理を用いてデータを取得
取得したデータをmounted内で子コンポーネントにpropsで渡し、親コンポーネントとともに子コンポーネントを表示する

結論

v-ifを用いて親コンポーネントでの処理が終わったら、子コンポーネントを有効にすることで実現できました。

Parent.vue

<template>
    <ChildComponent v-if="ready" />
</template>

<script>
export defaul {
    name: 'parent',
    data: () => {
        return {
            ready: false,
            result: {},
        },
    },
    async mounted() {
        this.result = await ... // 非同期処理
        this.ready = true // 非同期処理が終わった後に子コンポーネントが有効になる
    },
}
</script>

v-showはv-ifと違い、子コンポーネントは表示されないもののDOMは生成されています。
なので親コンポーネントの非同期処理が終了したタイミングで、取得したデータを子コンポーネントにpropsで渡し、
親コンポーネントとともに子コンポーネントを表示するという今回の要件には合いませんでした。