将服务器端渲染的元素添加为Vue js父级的子级

Adding server-side rendered elements as children to Vue js parent

本文关键字：js Vue 添加服务器端元素更新时间：2023-10-01

我有一个服务器端呈现的页面，其中包含"订单"和一个实例化为"父对象"的根Vue对象。是否可以将渲染的html顺序作为父Vue对象的子对象启动？

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

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

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

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

父应用程序（使用新Vue）-->顺序1（在页面呈现后作为子项添加）-->订单2（在页面呈现后作为子项添加）

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

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

完成ajax请求后，您可以启动：

Vue.$compile(this.$el);

其中

这个$el

将是您当前的元素或组件

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