vue-grid-layout 从栅格外部向栅格内部添加其他组件

你可以通过在栅格组件中添加一个 slot 来实现在栅格内部添加其他组件。具体步骤如下：

1. 在栅格组件的内部添加一个 slot，例如：

<vue-grid-layout>
  <template v-slot:item="item">
    <!-- 插入其他组件 -->
  </template>
</vue-grid-layout>

2. 在插入的组件中添加 `grid-item` 类名，以便栅格组件能够识别它，并将其放入相应的栅格中，例如：

<vue-grid-layout>
  <template v-slot:item="item">
    <div class="grid-item">
      <!-- 插入其他组件 -->
    </div>
  </template>
</vue-grid-layout>

3. 在栅格组件的 `layout` 属性中指定插入组件的位置和大小，例如：

<vue-grid-layout :layout="[
  { x: 0, y: 0, w: 2, h: 2 },
  { x: 2, y: 0, w: 2, h: 4 }
]">
  <template v-slot:item="item">
    <div class="grid-item">
      <!-- 插入其他组件 -->
    </div>
  </template>
</vue-grid-layout>

在上面的例子中，第一个插入的组件将被放置在左上角的 2x2 的栅格中，第二个插入的组件将被放置在右上角的 2x4 的栅格中。