vue.js3で親コンポーネントから子コンポーネント・孫コンポーネントを管理する方法

164 回閲覧されました

公開日 : 2025年9月1日
最終更新日 : 2025年6月22日

みなさんこんにちは、jonioです。

業務で親コンポーネントのボタンを押すことで子モーダル(子コンポーネント)を表示して子コンポーネントのボタンを押すことで子モーダルを閉じて孫モーダル(孫コンポーネント)を表示しないといけなくて実装に時間がかかったのでアウトプットとしてこの記事を残します。

1 Laravelの無料学習サイトを作りました
2 バックエンド
3 前提条件
4 親コンポーネント
5 子コンポーネント
6 孫コンポーネント

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

バックエンド

Laravel11系を使いました。

前提条件

app.jsでコンポーネントはグローバルに呼び出せるようにしています。

親コンポーネント

下記の記述をします。

<template>
    //子コンポーネント
    <child
        v-if="showChildModal"
        :showChildFlg="showChildModal"
        @close-child-modal="closeChildModal"
        @open-grand-child-modal="openGrandChildModal"
    />
    //孫コンポーネント
    <grand-child
        v-if="showGrandChildModal"
        :showGrandChildFlg="showGrandChildModal"
        @close-grand-child-modal="closeGrandChildModal"
    />
    
    <button         
        @click="showChildModal = true"
    >子モーダルを開く</button>
</template>

<script>
import { ref } from 'vue'

export default {
    setup() {
        const showChildModal = ref(false);
        const showGrandChildModal = ref(false);
        
        const closeChildModal = () => {
            showChildModal.value = false;
        }
        const closeGrandChildModal = () => {
            showGrandChildModal.value = false;
        }
        const openGrandChildModal = () => {
            showChildModal.value = false;
            showGrandChildModal.value = true;
        }
        
        return {
          showChildModal,
          closeChildModal,
          openGrandChildModal,
          showGrandChildModal,
          closeGrandChildModal,          
        }
    }
}

親コンポーネントに子コンポーネント・孫コンポーネントを表示する為の記述をします。

子コンポーネント(3行目〜8行目)では子コンポーネントを閉じる(6行目)・孫コンポーネントを開く(7行目)処理をします。

孫コンポーネント(10行目〜14行目)では孫コンポーネントを閉じる(13行目)処理をします。

子コンポーネントの処理を追う為に記述します。

子コンポーネント

下記の記述をします。

<template>
    <section
        v-if="props.showChildFlg"
        @click="closeChildModal"
    >  
        <button 
            @click="openGrandChildModal"
        >新規追加</button>        
    </section>
</template>

<script>
import { ref } from 'vue';

export default {
    props: {
        showChildFlg: {
            type: Boolean,
            required: true,
        },
    },
    emits: ['close-child-modal', 'open-grand-child-modal'],
    setup(props, { emit }) {
        const closeChildModal = () => {
            emit('close-child-modal');
        }
        
        const openGrandChildModal = () => {
            emit('close-child-modal');
            emit('open-grand-child-modal');
        };       
        
        return {
            closeChildModal,
            openGrandChildModal
        };
    }
};
</script>

親コンポーネントの5行目(showChildFlg)を3行目で渡しています。

子コンポーネントを閉じる処理は24行目〜26行目です。

25行目の記述があることで親コンポーネントを通して子コンポーネントを閉じることができます。

孫コンポーネントを開く処理は28行目〜31行目です。

子コンポーネントを閉じる処理と孫コンポーネントを開く処理を親コンポーネントにして貰う為に22行目の記述をします。(この行で親コンポーネントにやって貰う処理の指定をします)

最後は孫コンポーネントの処理を追う為に記述します。

孫コンポーネント

下記の記述をします。

<template>
    <section
        v-if="props.showGrandChildFlg"
        @click="closeGrandChildModal"
    >
        <button 
            @click="closeGrandChildModal"
        >孫モーダルを閉じる</button>
    </section>
</template>

<script>
import { ref } from 'vue';

export default {
    props: {
        showGrandChildFlg: {
            type: Boolean,
            required: true,
        },
    },
    emits: ['close-grand-child-modal'],

    setup(props, { emit }) {
        const closeGrandChildModal = () => {
            emit('close-grand-child-modal');
        }

        return {
            closeGrandChildModal
        };
    }
};
</script>

孫コンポーネントの処理は簡単で自分を閉じるのを親コンポーネントに伝えているだけです。