将服务器端渲染元素作为子元素添加到 Vue js 父元素答案

【问题标题】：Adding server-side rendered elements as children to Vue js parent将服务器端渲染元素作为子元素添加到 Vue js 父元素
【发布时间】：2016-07-19 14:55:56
【问题描述】：

我有一个带有“订单”的服务器端渲染页面和一个实例化为“父对象”的根 Vue 对象。是否可以将呈现的 html 订单作为该父 Vue 对象的子项启动？

Vue js 似乎在动态添加内容时效果最好，但在这种情况下，我希望能够从预先存在的标记向父级添加子级。甚至可能吗？我试图找到解决方案，但我无法让它发挥作用。基本上，我在网站上有几个像这样的 div

<div id="order-1">some content</div><div id="order-2">some other content</div>

我想将它们作为子组件添加到我使用 "new Vue({..." 启动的 Vue 组件中，其元素设置在 body 上。

所以基本上我想要这个结构

父应用（使用新的 Vue） --> 订单 1（在页面渲染后添加为子级） --> 订单 2（在页面渲染后添加为子级）

【问题讨论】：

【解决方案1】：

您似乎正在向组件中添加 ajax 内容。

为此，您需要重新编译该组件或实例以表明 ajax 内容已经是 vue 实例的一部分。

完成 ajax 请求后，您可以触发：

Vue.$compile(this.$el);

在哪里

this.$el

将是您当前的元素或您的组件

【讨论】：

【解决方案2】：

如果您要使用全局组件，则需要在返回根应用程序组件之前将它们注入您的渲染器，以便它们在服务器端可用。 Vue 服务器端无法渲染它无权访问或定义的组件。

【讨论】：