孤独的孩子：我应该将控制流指令写入通用结构组件吗？

控制流指令，例如v-if和v-for，有可能创建难以在大型项目中阅读的嵌套代码。如果v-for嵌套在v-if中，这个特性就更加明显了。为了程序员的头发着想，希望大家不要写出多层嵌套的代码。但如果这就是您要做的，这里有一个技巧可以轻松将这些噩梦变成童话故事。一个孤独的子组件如果我想在嵌套开始增长时保持整洁，我的默认设置是将代码提取到一个新组件中。使用v-for和v-if我们将指令中的所有内容都变成它自己的组件。例如，让我们从这个嵌套模板开始接下来，我们将v-for的内容提取到一个新的组件中：如果我们导入这个新组件，我们会看到它很好地摆脱了所有嵌套：内容不多在本例中嵌套，所以针对一小部分内容做一个组件有点麻烦。但是，如果我们有两层、三层或更多层的嵌套，这个技巧可以消除嵌套结构并使代码更容易理解。但是这里有一个问题：为什么我们不把v-for指令也写到新组件中呢？我们应该将控制流指令放入新组件中吗？假设，我们上面的v-for被放入了新的组件中，那么我们会得到如下结构：看来父组件确实清楚多了。但不幸的是，这种重定向将复杂性置于子组件中：哪种方式更好？如果你的最终目标是减少Nesting量，那么这个选择肯定更糟。我们在子组件中添加了额外的嵌套级别，而没有减少父组件中的嵌套级别。通常，我会避免将控制流指令（如v-if和v-for）放在此类组件的根部，因为它会影响可重用性。如果您只需要一个简单的ListItem怎么办？假设你使用v-if，如果你想使用不同的逻辑在组件之间切换，或者你想使用一个完全不同的组件怎么办？将控制流指令写到最小公共结构的组件中会限制我们的灵活性，而不会给我们带来更多的便利。因此，我倾向于将控制流指令留在此类小部件之外。我也尽量避免将它们放在组件的根部。一旦您深入了解“引擎盖下”发生的事情，这个问题及其解决方案就会变得更加有利。作者：MichaelThiessen译者：前端小智来源：medium原文：https://www.digitalocean.com/community/tutorials/vuejs-component-slots关注下方二维码。转载请联系大千世界公众号。