Vue js 和动态组件和内容答案

【问题标题】：Vue js and dynamic components and contentVue js 和动态组件和内容
【发布时间】：2017-11-20 06:11:12
【问题描述】：

我想在 VueJS 中为我的项目实现模态窗口。正如我在 jQuery 中所做的那样：

但是 VueJS 有不同的逻辑，我真的不知道如何创建完全动态的模态窗口。

我可以创建模态窗口组件并将其附加到正文，但我不能将 HTML（我从 AJAX 请求中获得）作为模板槽放入组件内

<slot></slot>.

那我该怎么做呢？也许一些最佳实践？

谢谢

【问题讨论】：

【解决方案1】：

使您希望 HTML 内容所在的模态元素具有属性 v-html="modalContent"，然后在您的 vue 代码中，当您想要打开该模态时，发出您的 Ajax 请求并将生成的 HTML 存储到 this.modalContent

【讨论】：

【解决方案2】：

我解决了。

我们需要将我们的模态组件放在“#app”之外，并在其中包含所需的 html（从 AJAX 获取）并将该实例作为新 vm 启动。

并创建包装器来管理它

Modal = { show(), hide(), change() ... }

当然 hide 方法可以破坏当前的模态窗口 VM 等等。

因此，在那之后我们将拥有功能齐全的模态窗口，希望对其他人有所帮助。

【讨论】：