这可能不是网格堆栈创建者所想的，但你可以这样做：

<template>
  <button @click="addNewWidget()">Add Widget</button> {{ info }}

  <section class="grid-stack">
    <div 
      v-for="(component, key, index) in components" 
      :key="'component'+index" 
      :gs-id="key" 
      class="grid-stack-item"
      :gs-x="component.gridPos.x" 
      :gs-y="component.gridPos.y" 
      :gs-h="component.gridPos.h" 
      :gs-w="component.gridPos.w"
      gs-auto-position="true"
    >
      <div class="grid-stack-item-content">
        <component :is="component.name" v-bind="component.props" />
      </div>
    </div>
  </section>
</template>

<script>
import { ref, onMounted, reactive, nextTick } from 'vue';
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import YourRandomComponent1 from '../YourRandomComponent1.vue';
import YourRandomComponent2 from '../YourRandomComponent2.vue';
import YourRandomComponent3 from '../YourRandomComponent3.vue';

export default {
  name: "WidgetGrid",
  setup() {
    let info = ref("");
    let grid = null;

    let components = reactive({
      yourRandomComponent1: {
        name: "YourRandomComponent1", props: {}, gridPos: { x: 0, y: 1, w: 4, h: 5 }
      },
      yourRandomComponent2: {
        name: "YourRandomComponent2", props: {}, gridPos: { x: 0, y: 1, w: 2, h: 5 }
      },
    });

    onMounted(() => {
      grid = GridStack.init({
        float: true,
        cellHeight: "70px",
        minRow: 1,
      });

      grid.on("dragstop", (event, element) => {
        console.log("move event!", event, element);
        const node = element.gridstackNode;
        info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
      });
    });

    // this will of course only work once because of the object-key
    function addNewWidget() {
      components.yourRandomComponent3= {
        name: "YourRandomComponent3", props: {}, gridPos: { x: 0, y: 1, w: 2, h: 5 }
      };
      // we have to wait for vue to update v-for, 
      // until then the querySelector wont find the element
      nextTick(() => {
        console.log(grid);
        let compEl = document.querySelector('[gs-id="yourRandomComponent3"]');
        console.log(compEl);
        grid.makeWidget(compEl);
      });
      console.warn("i will only work once, fix my inputs to reuse me");
    }

    return {
      info,
      components,
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YourRandomComponent1,
    // eslint-disable-next-line vue/no-unused-components
    YourRandomComponent2,
  },
}
</script>

<style>
.grid-stack {
  background-color: #FAFAFF;
  border-style: dashed;
}

.grid-stack-item {
  color: #2c3e50;
  text-align: center;
  border-style: solid;
  overflow: auto;
  z-index: 50;
}
</style>

在我的例子中，缺少了一个div，其中grid-stack-item-content类 Package 了组件，这使得小部件无法移动。我还添加了一个add-new-widget函数，演示如何向网格添加新的小部件。关键是使用reactive()，这样Vue将重新呈现页面。重新呈现后，组件需要使用grid.makeWidget注册为网格元素。为此，我们需要组件的Dom元素，该元素是在Vue使用nextTick重新渲染后获得的。

您可以像这样在Vue3中使用自己的组件

<div class="grid-stack" :style="{ 'background-color': hex }"  >
    <widget v-for="widget in widgets" :widget="widget" :key="widget" />
</div>

导入组件

import Widget from "src/components/GridStackComponent.vue";

添加要导出的组件

export default {
  name: 'GridStack',
  components: {
    Widget
  },
  data() {
   ...
  },
  ...
}

就这样。结果可以是这样的