我正在努力使可重复使用的组件网格堆栈 https://github.com/troolee/gridstack.js.

我找不到一种简单的方法来做类似的事情this.$compile方法来自vue 1。 我见过这个example http://codepen.io/anon/pen/QGxeJB?editors=1010.

这是我的 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 中时，它也可以工作。

I guess这是因为组件中的 html 没有被预编译。解决了compile不过在 vue1 中。

我已经尝试过的：

1. Mount，按照建议here https://github.com/vuejs/Discussion/issues/1266，但它不起作用，因为它看不到定义的组件，我猜
2. 我已经看到有可能让它工作push，按照建议here https://stackoverflow.com/questions/41763987/vue-js-2-0-this-compile。但我的 vue 知识还不是那么强，我找不到一种方法让它以这种方式工作，因为会有多种类型的块，并且所有这些块都应该被 gridstack 视为相同的元素。另外，同一组件可以在一块板上以不同的参数使用多次。
3. 我见过有一种方法可以编译standalone component, like here https://forum-archive.vuejs.org/topic/5305/vue-2-0-how-to-compile-a-standalone-component/6，但看起来非常不推荐，所以我正在寻找其他方法。
4. 我也见过these https://v2.vuejs.org/v2/guide/render-function.html render functions，但同样 - 不幸的是我的技能不太好应用它。

所以，总而言之 - 我真的很感激关于这些方法的一些建议，或者可能是关于实现此方法的其他方法的建议。问题是我也应该指望网格堆栈脚本，而不是简单地插入元素。

Thanks!

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>

Using mount https://v2.vuejs.org/v2/api/#vm-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);