親コンポーネントをクリックして子コンポーネントをロードしますか？

Question

私は、コメントを読み込むボタンコンポーネントを持っています。コメントは別のコンポーネントです。

ボタンをクリックすると、どのように子コンポーネントを読み込むことができますか？子コンポーネントでv-ifを使用するのは簡単なケースですか？それとももっと効率的な方法がありますか？

<template> 
    <div class="comment-btn" @click="toggleActive"> 
     <img src="/img/comment-btn.svg"> 
    </div> 

    <comments v-if="active"></comments> 
</template> 

EDIT：

私はマウントについて読んでいる、それが良いでしょうか？

Answer 1

v-ifとv-showは両方完全に許容できるオプションです。しかし、あなた自身に尋ねる必要がある質問は、「私は、トグルされて何かをするために子コンポーネントが必要ですか？」です。 「子コンポーネント内のデータを永続化する必要がありますか？」あなたの正確なプログラムのニーズに基づいて、それに応じて選択したいと思うでしょう。あなたはトグルで発生する何かを必要はありませんが、データがv-showを使用し、永続化が必要な場合
1）：

は、ここでは、あなたの回答に基づいて必要がありますソリューションの一般的な説明です。あなたはトグルで発生する何かを必要としない、あなたが一掃されるデータを使用する場合は
2）、v-ifを使用しています。
3）トグルで何か起こる必要があり、データを永続化したい場合は、v-ifとmountedライフサイクルフックを使用してイベントをトリガーし、$emitのデータを親コンポーネントに送信して後で復元できるようにします。あるいは、v-showとwatch、特にpropsの値を使用します。あなたはトグルに起こるために何かを必要とし、その後、ちょうどイベントをトリガするためv-ifとmountedライフサイクルフックを使用して、あなたのデータを永続必要がない場合は
4）。