Javascript 预渲染vue.js 2.0组件（与此类似。在vue 1中编译$compile）

我正在尝试为制作可重用组件

我找不到一种简单的方法来执行类似于

的操作。vue 1中的$compile

方法。 我见过这个

以下是我的vue脚本： 使用，您应该能够获得需要传递到

grid.addWidget

的内容

grid.addWidget(mounted.$el, 0,0,1,1,true);

首先，我们想把组件变成我们可以构造的东西

const MyWidget = Vue.extend(DWidget);

然后，我们可以挂载该构造函数

const mounted = new MyWidget().$mount();

如果不向

$mount（）

传递任何内容，则不会将组件添加到DOM中。我们可以使用

mounted.$el

访问它生成的元素。我希望您能够将其传递给

addWidget

grid.addWidget(mounted.$el, 0,0,1,1,true);

---

所以，正如@Bert所建议的，我必须使用mount。他的方法非常有效。 下面是一个结果addWid（）方法，它实际上是一个可重用组件：

addWid () {
  const MyWidget = Vue.extend(DWidget)
  const mounted = new MyWidget().$mount()
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}

---

希望它能对某人有所帮助

什么是

d-widget

？我们能看看定义吗？@BertEvans，谢谢你的提问！我刚刚添加了定义，您可能会看到它基本上与我在addGraph（）中使用的模板相同，只是作为组件导入，而不是html。您是否打算向

d-widget

组件添加的不仅仅是html，还是只是一个模板。本质上，您的问题在于使用单个文件组件，模板被编译为渲染函数，而您真正想要的只是模板本身（目前的情况）。@BertEvans yep，您理解正确。但是，是的，我需要在该组件中有更多的方法，我还将发送参数，模板本身将更加复杂（d3图）。这只是理解问题的一个基本示例。因此，在将组件提供给addWid（）之前，我找不到一种方法来预呈现（我们这样称呼它）组件中的htmlmethod@BertEvans我现在也在研究vue属性，也许这是另一种方法Hi，Bert。嗯，从某种程度上说，这很有帮助！谢谢现在，当我第一次调用addWid（）时，它真的生成了！一切都井然有序。但是，当我再次调用此方法时，会添加一个组件，但会删除以前的组件。（所以gridstack只留下空白，而不是第一个）。虽然我可以使用addGraph（）添加所需的任意多个组件，并且所有组件都同时显示哦，我刚刚意识到我的一些错误，现在它可以工作了：）！太好了，非常感谢！

grid.addWidget(mounted.$el, 0,0,1,1,true);

addWid () {
  const MyWidget = Vue.extend(DWidget)
  const mounted = new MyWidget().$mount()
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}