我正在努力使 可重用组件用于 栅格叠 。

我无法从 vue 1 中找到一种类似于 方法的简单方法。我见过这个 示例 。

这是我的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>
  `, 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 ，正如建议的 这里 ，但是它不能工作，因为它看不到定义的组件，我猜
2. 我已经看到了让它与 push 一起工作的可能性，就像 这里 建议的那样。但是我的vue知识还没有那么强，我无法找到一种方法让它以这种方式工作，因为有几种类型的块，它们都应该作为相同的元素被网格堆栈处理。另外，同一部件可以在一个板内使用几次，参数不同。
3. 我已经看到了一种编译 standalone component 的方法，比如 这里 ，但是看起来这是非常不推荐的，所以我正在寻找其他方法。
4. 我也见过 这些 render functions ，但不幸的是，我的技能没有那么好地应用它。

因此，总结一下--我非常希望能就这些方法提供一些建议，或者建议另一种方法来实现这些方法。问题是，我也应该依赖于网格堆栈脚本，而不是简单地插入元素。

谢谢!

UPD: d-小部件的定义：

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

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