vue.js - 单击父组件加载子组件？

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 生命周期 Hook 来触发事件，以及 $emit 任何数据到您的父组件，以便以后可以恢复。或者，使用 v-show 和 watch 特定的 props 值。
4) 如果您需要在切换时发生某些事情并且不需要保留数据，那么只需使用 v-if 和 mounted 生命周期 Hook 来触发事件。