在点击父组件时加载子组件？

Question

我有一个加载评论的按钮组件。评论是一个单独的组成部分。

如何在点击按钮时加载子组件？在子组件上使用v-if是一个简单的例子吗？还是有更有效的方式？

e.g。

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

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

编辑：

我一直在读关于mount的事情，那会更好吗？

Answer 1

v-if和v-show都是完全可以接受的选项。但是，您需要问自己的问题是“我是否需要子组件在切换时做任何事情？”并且“我是否需要保留子组件中的任何数据？”。根据您的确切计划需求，您需要相应地选择。

以下是根据您的答案对您需要的解决方案的一般描述：
1）如果您在切换时不需要任何操作，但需要保留数据，请使用v-show 2）如果您在切换时不需要任何操作，并且希望清除数据，请使用v-if。
3）如果您在切换时需要执行某些操作并且希望数据保持不变，请使用v-if和mounted生命周期挂钩来触发事件，并$emit将任何数据发送到您的父组件，以便它可以稍后恢复。或者，使用v-show和watch特定props值 4）如果您在切换时需要执行某些操作并且不需要保留数据，则只需使用v-if和mounted生命周期挂钩来触发事件。