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

Posted 2023-02-22

【中文标题】如何在使用 Vue.js 触发任何事件时创建新组件？

【英文标题】：How can I create a new component on firing any event using Vue.js?

【发布时间】：2017-08-20 15:46:50

【问题描述】：

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

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

甚至可以使用 Vue 吗？

【问题讨论】：

如果我理解正确，您想节省额外的html，如果您添加edit-comment-component，每个DOM 中会出现comment-component？也没有使用v-show。 v-if 也在名单之外吗？因为这样就行了。

我对@9​​87654327@ 或v-if 没有任何问题，我只是不想附加然后隐藏edit-comment-component。在某些情况下，我确实想隐藏帖子但加载 edit-comment-componentrather 通过更改一些布尔变量使其可见。

我只是在学习 JS 和 JS 框架。事实上，Vue 是我上周开始的第一个 JS 框架。所以，我要求的东西可能没有任何意义。如果是这样，我为我的无知感到非常抱歉。

我想到的事情是：你会如何设计它？ v-if v-show 将帮助您在文档流中维护 edit-comment-component。动态创建组件也可以，但是现在您说“加载”是指异步加载组件吗？

我对“异步”加载了解不多。我想我想要的有点类似于 Jquery 的 append/html 函数功能。我只想要一个 Vue 组件，而不是 HTML 标签。

【参考方案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 不会损害您的用例。