Vue Slots
Slots是 Vue 中的一项强大功能，允许更灵活和可重用的组件。
我们用插槽在 Vue 中将内容从父级发送到<template>子组件的。
Slots
到目前为止我们只是使用了里面的组件<template>像这样的自闭合标签：
App.vue:
<template>
<slot-comp />
</template>相反，我们可以使用开始和结束标签，并在其中放入一些内容，例如文本：
App.vue:
<template>
<slot-comp>Hello World!</slot-comp>
</template>
但要接收“Hello World！”在组件内部并将其显示在我们的页面上，我们需要使用<slot>组件内的标签。这<slot>标签充当内容的占位符，以便在构建应用程序后<slot>将被发送给它的内容替换。
Slots 用于卡片
插槽还可用于包裹较大的动态 html 内容块，以获得类似卡片的外观。
之前我们已经将数据作为 props 发送来在组件内创建内容，现在我们可以直接在组件内发送 HTML 内容<slot>标签原样。
示例
App.vue:
<template>
<h3>Slots in Vue</h3>
<p>We create card-like div boxes from the foods array.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
<p>{{x.desc}}</p>
</slot-comp>
</div>
</template>
当内容进入组件时<slot>是，我们在周围使用一个div<slot>并设计样式<div>在本地创建围绕内容的类似卡片的外观，而不影响我们应用程序中的其他 div。
SlotComp.vue:
<template>
<div> <!-- This div makes the card-like appearance -->
<slot></slot>
</div>
</template>
<script></script>
<style scoped>
div {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 10px;
margin: 10px;
}
</style>
围绕内容生成卡片式框架的组件可以重复使用来创建不同的元素，但周围具有相同的卡片式框架。
在此示例中，我们使用与食品相同的组件来创建页脚。
示例
App.vue:
<template>
<h3>Reusable Slot Cards</h3>
<p>We create card-like div boxes from the foods array.</p>
<p>We also create a card-like footer by reusing the same component.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
</slot-comp>
</div> <footer> <slot-comp> <h4>Footer</h4> </slot-comp> </footer>
</template>
备选内容
如果创建的组件没有内容，我们可以在<slot>。
示例
此应用程序中的第一个组件未提供任何内容，因此将呈现备选内容。
App.vue:
<template>
<h3>Slots Fallback Content</h3>
<p>A component without content provided can have fallback content in the slot tag.</p>
<slot-comp>
<!-- Empty -->
</slot-comp>
<slot-comp>
<h4>This content is provided from App.vue</h4>
</slot-comp>
</template>
SlotComp.vue:
<template>
<div>
<slot>
<h4>This is fallback content</h4>
</slot>
</div>
</template>
Vue练习
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!