使用 Vue 的动态 CSS 网格

Question

我正在尝试构建一个基于 CSS 网格的 Vue 组件，类似这样。

<Grid :cells="7" :columns="{xs: 2, sm: 3, md: 4, lg: 5}" />

xs、sm、md 和 lg 基本上告诉组件应该根据一些预定义的断点渲染多少列。

在组件的模板本身中，我正在执行以下操作。

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
</div>

现在这会生成我的网格。但是，我无法找到一种方法将不同的孩子传递给创建的每个单元格。基本上，网格中的每个单元格都可以有不同的内容。如何从 Grid 组件传递这些内容数据？作为孩子，插槽，数据道具或其他什么？

编辑：大多数人都觉得这很令人困惑，所以请提供更多细节。

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
    {{cell}}
</div>

这样，我将在 CSS 网格的每个单元格中获得一个唯一编号。我希望这些数据来自用户。

类似的，

<Grid>
    <div>content from here should go in Cell #1</div>
    <div>content from here should go in Cell #2</div>
    <div>content from here should go in Cell #3 and so on</div>
</Grid>

我将整个组件托管在这里 - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/Grid/Grid.vue 并且在这个问题中使用它的方式是在 App.vue 或更高版本中。

对此的任何帮助，我们将不胜感激！期待！

Answer 1

正如@tony19 所说...我不确定您要完成什么...但也许这样的事情可能对您有用...

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
 <div id="mychild1" v-if="cell === 'foo'></div>
 <div id="mychild2" v-else-if="cell === 'boo'></div>
 <div id="mychild3" v-else-if="cell === 'doo'></div>
</div>