作者：Michael Thiessen
译者：前端小智
来源：medium
点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文
GitHubhttps://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。
控制流指令，如v-if和v-for，如果在较大项目中，就很有可能会创建一些难以阅读的嵌套代码。如果在v-if内嵌套了v-for ，刚这个特征就更明显了。
为了程序员的头发着想，我希望大家不要编写具有多级嵌套代码。
但是，如果你偏要这么干，那么送你一个技巧，可以以轻松地将这些噩梦转变成童话故事。
一个孤独的子组件
当嵌套开始变多时，如果我还想要保持整洁，我的默认做法是将代码提取到一个新组件中。
使用v-for和v-if，我们把指令中的所有东西都转换成它自己的组件。
举个例子来看看，我们从这个有嵌套的模板开始
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<div v-for="item in list">
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
<footer>
<!-- ... -->
</footer>
</div>
</template>
接着，我们把 v-for 里面的内容提取到一个新的组件中：
<template>
<div>
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
</template>
如果我们导入这个新组件，我们会看到它很好地摆脱了所有嵌套:
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<ListItem
v-for="item in list"
:item="item"
/>
<footer>
<!-- ... -->
</footer>
</div>
</template>
此示例中没有太多的嵌套，所以单独为一小部分内容做一个组件，有点繁琐。 但是，如果我们有两个，三个或更多的嵌套级别，则此技巧可以消除嵌套结构并让代码更易于理解。
但这里有一个问题:为什么我们不把v-for指令也写入新的组件中？
我们应该把控制流指令放入新的组件中吗？
假设，我们上面的 v-for 放到新的组件内，则我们会得到下面的结构：
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<List :list="list" />
<footer>
<!-- ... -->
</footer>
</div>
</template>
这样看上去，父组件确实清晰很多。但不幸的是，这种变向的把复杂度放到了子组件中：
<template>
<div>
<div v-for="item in list">
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
</div>
</template>
哪种方式更好？
如果你最终的目的就是想减少嵌套数量，那么这个选择肯定更糟糕。我们在子组件中添加了额外的嵌套级别，而没有减少父组件中的嵌套级别。
通常，我会避免将诸如v-if和v-for之类的控制流指令放在这样的组件的根部，因为它会影响可重用性。
如果只需要一个简单ListItem 该怎么办？
假设使用v-if，如果要使用不同的逻辑在组件之间进行切换，或者要使用完全不同的组件怎么办？
将控制流指令写小最小通用结构的组件中会限制我们的灵活性，而不会给我们带来更多的便利性。 因此，我倾向于将控制流指令留在这样的小组件之外。 我还尝试避免将它们放在组件的根部。
一旦你深入了解“底层”的情况，此问题及其解决方案就会显得更加有优势。
https://www.digitalocean.com/community/tutorials/vuejs-component-slots
作者：Michael Thiessen
译者：前端小智
来源：medium
点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文
GitHubhttps://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。
控制流指令，如v-if和v-for，如果在较大项目中，就很有可能会创建一些难以阅读的嵌套代码。如果在v-if内嵌套了v-for ，刚这个特征就更明显了。
为了程序员的头发着想，我希望大家不要编写具有多级嵌套代码。
但是，如果你偏要这么干，那么送你一个技巧，可以以轻松地将这些噩梦转变成童话故事。
一个孤独的子组件
当嵌套开始变多时，如果我还想要保持整洁，我的默认做法是将代码提取到一个新组件中。
使用v-for和v-if，我们把指令中的所有东西都转换成它自己的组件。
举个例子来看看，我们从这个有嵌套的模板开始
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<div v-for="item in list">
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
<footer>
<!-- ... -->
</footer>
</div>
</template>
接着，我们把 v-for 里面的内容提取到一个新的组件中：
<template>
<div>
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
</template>
如果我们导入这个新组件，我们会看到它很好地摆脱了所有嵌套:
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<ListItem
v-for="item in list"
:item="item"
/>
<footer>
<!-- ... -->
</footer>
</div>
</template>
此示例中没有太多的嵌套，所以单独为一小部分内容做一个组件，有点繁琐。 但是，如果我们有两个，三个或更多的嵌套级别，则此技巧可以消除嵌套结构并让代码更易于理解。
但这里有一个问题:为什么我们不把v-for指令也写入新的组件中？
我们应该把控制流指令放入新的组件中吗？
假设，我们上面的 v-for 放到新的组件内，则我们会得到下面的结构：
<template>
<div>
<h1>{{ title }}</h2>
<div class="navigation">
<!-- ... -->
</div>
<List :list="list" />
<footer>
<!-- ... -->
</footer>
</div>
</template>
这样看上去，父组件确实清晰很多。但不幸的是，这种变向的把复杂度放到了子组件中：
<template>
<div>
<div v-for="item in list">
<h2 class="item-title">
{{ item.title }}
</h2>
<p class="item-description">
{{ item.description }}
</p>
</div>
</div>
</template>
哪种方式更好？
如果你最终的目的就是想减少嵌套数量，那么这个选择肯定更糟糕。我们在子组件中添加了额外的嵌套级别，而没有减少父组件中的嵌套级别。
通常，我会避免将诸如v-if和v-for之类的控制流指令放在这样的组件的根部，因为它会影响可重用性。
如果只需要一个简单ListItem 该怎么办？
假设使用v-if，如果要使用不同的逻辑在组件之间进行切换，或者要使用完全不同的组件怎么办？
将控制流指令写小最小通用结构的组件中会限制我们的灵活性，而不会给我们带来更多的便利性。 因此，我倾向于将控制流指令留在这样的小组件之外。 我还尝试避免将它们放在组件的根部。
一旦你深入了解“底层”的情况，此问题及其解决方案就会显得更加有优势。
原文：https://www.digitalocean.com/community/tutorials/vuejs-component-slots
点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文
GitHubhttps://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。