单击父组件加载子组件？

Question

我有一个加载评论的按钮组件。注释是一个单独的组件。

如何单击按钮加载子组件？在子组件上使用 v-if 是一个简单的例子吗？或者有没有更有效的方法？

例如

<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触发事件生命周期挂钩。