时间戳

首页 > 解决方案 > 如何将 Vue 实例挂载到尚未附加的 HTML 元素

javascript - 如何将 Vue 实例挂载到尚未附加的 HTML 元素

问题描述

在我正在创建的应用程序中，我想将一个Vue实例安装到HTML Node. 但是使用该$mount函数后，Node不包含Vue实例。

在下面的代码中，您可以看到我要完成的工作。我想返回一个HTML Node包含Vue实例。

const el = document.createElement('div');
new Vue({
  render(createElement) {
    return createElement(HelloWorldVue, {}, {});
  },
  components: {
    HelloWorldVue,
  },
}).$mount(el);
return el;

有人知道如何在将 Vue 实例安装到视图之前将其安装到生成的元素上吗？

标签： javascriptvue.jsdom

解决方案

通过文档：

与 Vue 1.x 不同，挂载的元素在所有情况下都将替换为 Vue 生成的 DOM。

所以这行不通。$mount()但是你可以通过不带任何参数的调用来做类似的事情：

如果elementOrSelector未提供参数，则模板将呈现为文档外元素，您必须使用本机 DOM API 自己将其插入到文档中。

// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

推荐阅读