Laden Sie eine Kindkomponente beim Klicken auf die Elternkomponente?

Question

Ich habe eine Schaltfläche Komponente, die Kommentare lädt. Die Kommentare sind eine separate Komponente.

Wie kann ich beim Klicken auf die Schaltfläche eine untergeordnete Komponente laden? Ist es ein einfacher Fall, v-if für die untergeordnete Komponente zu verwenden? Oder gibt es einen effizienteren Weg?

z.B.

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

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

EDIT:

Ich habe über Mount gelesen, dass wäre besser?

Answer 1

v-if und v-show sind beide perfekt akzeptable Optionen. Die Fragen, die Sie sich stellen müssen, sind jedoch: "Brauche ich die Kindkomponente, um etwas zu tun, wenn ich sie umschalte?" und "Benötige ich Daten in der untergeordneten Komponente, die beibehalten werden sollen?". Basierend auf Ihren genauen Programmanforderungen sollten Sie entsprechend wählen.

Hier ist eine allgemeine Beschreibung der Lösungen, die Sie auf der Grundlage Ihrer Antworten benötigen:
1) Wenn Sie auf Makeln passieren brauchen nichts, aber Sie müssen Daten beibehalten, v-show verwenden.
2) Wenn beim Umschalten keine Aktion erforderlich ist und Daten gelöscht werden sollen, verwenden Sie v-if.
3) Wenn Sie etwas passieren auf Makeln und Sie wollen Daten beibehalten, verwenden v-if und den mounted Lifecycle Haken das Ereignis zum Auslösen und $emit alle Daten zu Ihrem Stammkomponente so kann er später wieder hergestellt werden. Verwenden Sie alternativ v-show und einen watch einen bestimmten props Wert.
4) Wenn Sie beim Umschalten eine Aktion ausführen müssen und Ihre Daten nicht gespeichert werden müssen, verwenden Sie einfach v-if und den Lebenszyklus-Hook mounted, um das Ereignis auszulösen.