如何在使用 Vue.js 触发任何事件时创建新组件？答案

【问题标题】：How can I create a new component on firing any event using Vue.js?如何在使用 Vue.js 触发任何事件时创建新组件？
【发布时间】：2017-08-20 15:46:50
【问题描述】：

说，我正在展示一些我从 ajax 响应中获得的帖子。现在我想添加选项以在单击某个按钮时编辑任何特定帖子。我想，我可以使用 v-show 来做到这一点，我将在每个帖子中附加一个表单组件或其他内容，当用户单击编辑按钮时，我将隐藏帖子 div 并显示带有帖子正文和标题的表单，然后再次单击保存，我可以隐藏表单，向服务器发送请求以更新帖子，然后再次显示。

现在我的问题是，在不附加和隐藏任何东西的情况下是否可行？因为，我会让用户想要编辑他们的帖子多少次？我想通过单击某个按钮来调用一个函数或其他内容，这将返回一个组件，其中包含一个或两个文本字段，这些文本字段的值是帖子数据。

甚至可以使用 Vue 吗？

【问题讨论】：

如果我理解正确，您想节省额外的html，如果您添加edit-comment-component，每个DOM 中会出现comment-component？也没有使用v-show。 v-if 也在名单之外吗？因为这样就行了。
我对@987654327@ 或v-if 没有任何问题，我只是不想附加然后隐藏edit-comment-component。在某些情况下，我确实想隐藏帖子但加载 edit-comment-componentrather 通过更改一些布尔变量使其可见。
我只是在学习 JS 和 JS 框架。事实上，Vue 是我上周开始的第一个 JS 框架。所以，我要求的东西可能没有任何意义。如果是这样，我为我的无知感到非常抱歉。
我想到的事情是：你会如何设计它？ v-if v-show 将帮助您在文档流中维护 edit-comment-component。动态创建组件也可以，但是现在您说“加载”是指异步加载组件吗？
我对“异步”加载了解不多。我想我想要的有点类似于 Jquery 的 append/html 函数功能。我只想要一个 Vue 组件，而不是 HTML 标签。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您可以通过这种方式将一个组件附加到另一个组件：

// the parent component
const CommentComponent = new Vue({
  template: '<div>...</div>'
})

// the child component
const EditCommentComponent = Vue.extend({
  template: '<div> child </div>'
})

CommentComponent.$addChild({}, EditCommentComponent).$mount().$appendTo(CommentComponent.$el)

如果您希望在父组件中执行此操作，可以通过将 a 替换为 this 来执行此操作。

- Source

尽管正如我从 cmets 中推断的那样，这不是处理您的案件的最合适的方式。

【讨论】：

非常感谢您的解决方案。
顺便说一句，你有什么建议？我想我必须坚持使用 v-if 和 v-else。
我也建议这样做。 v-if 不会损害您的用例。