同じアプリケーションで 2 つの同一のコンポーネントを使用できますか?

Question

場合によっては、ポップアップ ウィンドウまたは非ポップアップ ウィンドウを呼び出したい場合があります

<テンプレート>
<!-- ポップアップ ウィンドウ -->
<v-dialog v-model="popupFlag">
    <A :prop-option="オプション">
</v-ダイアログ>


<!-- メインコンテンツ -->
<div v-if="!popupFlag">
    <B :prop-option="オプション">
</div>
</テンプレート>

「C.vue」から A をインポート
「C.vue」から B をインポート

デフォルトのエクスポート {

    小道具: {
        ポップアップフラグ: {
            タイプ: ブール値、
            必須: true、
            デフォルト: false、
        }
    }、
    データ（） {
        戻る： {
            オプション: 「まあ」
        }
    }
    
}

次のようにコードを設定しましたが、これは正しいコードですか? 同じコンポーネントを使用できますか? (C.vue)

Answer 1

はい、もちろん、親コンポーネント内で同じコンポーネントを複数回使用することは可能です。コンポーネントをテンプレートに挿入するたびに、コンポーネントの新しいインスタンスが作成されます。したがって、あなたの場合、コードは次のように簡略化できます。 リーリー

または、より簡単な方法は次のとおりです:

リーリー

これにより、

popupFlag に基づいて異なるオプションを使用して同じコンポーネントを効率的に再利用できます。