Prerender vue.js 2.0组件（类似于vue 1中的this.$compile）

Question

我正在尝试为 gridstack 制作 可重复使用的组件。

我找不到一种简单的方法来执行类似于 vue 1 中的 this.$compile 方法的操作。 我看过这个 example。

这是我的 vue 脚本：

export default {
  components: {
    'horizontal-fab': HorizontalFab,
    'd-widget': DWidget
  },
  data () {
    return {
  }
},
mounted () {
  var options = {
    cellHeight: 80,
    verticalMargin: 10,
    width: 3
  }
  $('#grid-stack').gridstack(options)
},

addWid () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)
},

addGraph () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(`
    <div class="grid-stack-item" data-gs-width="4">
      <div class="grid-stack-item-content">
        <p>HTML (added)</p>
      </div>
    </div>
  `, 0, 0, 1, 1, true)
}

这里是相关的 html:

<span @click="addGraph" >Line graph</span></li>
<span @click="addWid">Sparklines</span></li>
...
<div id="grid-stack" class="grid-stack grid-stack-3">
  <d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
</div>

问题是：

该方法 addGraph 完美运行，而 addWid - 不运行。即使作为组件直接插入 html，它也能正常工作。

我猜那是因为组件中的 html 没有被预编译。它是由 compile 在 vue1 中解决的。

我已经尝试过的：

1. Mount，正如 here 所建议的那样，但它没有工作，因为它看不到定义的组件，我猜
2. 我看到有可能让它与 push 一起工作，正如 所建议的那样。但是我的 vue 知识还不是那么丰富，我找不到一种方法让它以这种方式工作，因为会有几种类型的块，并且所有这些块都应该被 gridstack 视为相同的元素。另外，同一个组件可能会在一块板内使用不同的参数多次。
3. 我看到有一种编译 standalone component 的方法，比如 here，但看起来非常不推荐，所以我正在寻找其他方法。
4. 我也看到了 these render functions，但再次 - 不幸的是我的技能不太好应用它。

所以，总而言之 - 我真的很感激关于这些方法的一些建议，或者可能是关于其他实现方法的建议。问题是我还应该依靠 gridstack 脚本，而不是简单地插入元素。

谢谢！

UPD：d-widget 的定义：

这基本上是单个组件，在单独的文件中定义，名为 Widget.vue

<template>
<div class="grid-stack-item" data-gs-width="4">
    <div class="grid-stack-item-content">
        <p>Wiiidget! (added)</p>
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

Answer 1

使用mount，你应该能够得到你需要传递给grid.addWidget的东西。

首先我们要把组件变成我们可以构建的东西。

const MyWidget = Vue.extend(DWidget);

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

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

我没有向 $mount() 传递任何内容，它不会将组件添加到 DOM。我们可以使用 mounted.$el 访问它生成的元素。我希望您能够将其传递给 addWidget.

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

Answer 2

所以，正如@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)
}

希望对大家有所帮助！