Vue.js 使用v-for与HTML/JavaScript逻辑嵌套Vue组件？

我有一个

v-for

循环：

<truchet-tile v-for="tile in tiles" v-bind:key="tile.id" :id="tile.id" :ttype="tile.ttype">
  </truchet-tile>

我想在每行磁贴周围放置

标记，这样这些行就不会像现在那样内联了：

我可以创建一个名为

rowOfTiles

的新Vue组件，并使用嵌套的

v-for

对每一行中的磁贴组件进行循环

相反，是否可以在不使用DOM方法的情况下，使用HTML和JavaScript将简单的嵌套循环逻辑应用于分幅和分幅行。大概是这样的：

如果是这样，在这样的情况下，倾向于创建额外的Vue组件还是倾向于寻找方法在数据的“模型”方面做事情是更好的做法？（例如，创建新类别的Vue组件的性能代价有多高？）

---

这里是JSFiddle:

因为您有一行tile的概念，所以您的数据中应该有一行tile。然后在模板中直接迭代它们

您的初始化可以是

for (let y = 0; y < height; y++) {
  vm.tiles.push([]);
  for (let x = 0; x < width; x++) {
    // Vue tile component handles reactivity here:
    vm.tiles[y].push({
      id: id,
      ttype: Math.round(Math.random() * 6) // random tile
    });
    id++;
  }
}

for（让y=0；y

你的模板应该是这样的

  <div v-for="row in tiles">
    <truchet-tile v-for="tile in row" v-bind:key="tile.id" :id="tile.id" :ttype="tile.ttype">
    </truchet-tile>
  </div>

---

我有一个大型水疗中心，有数百个组件，都是用webpack构建的，而且非常快速。我不是100%确定你的问题是什么，你可以很容易地对这两种方法进行基准测试，但是，我认为你会发现它们无关紧要。通过在组件中创建清晰的关注点分离，有很多好处，代码的清晰可读性，以及在应用程序的各个位置重用的可能性。我还认为，让您的所有const都是被动的&在安装之前执行该逻辑将更符合VUE best practices@TimWickstrom.com谢谢。甚至可以使用HTML和JS（我上面的问题#1）吗。