Vue 插槽
插槽 是 Vue 中一个强大的功能，它允许更灵活和可重用的组件。
我们在 Vue 中使用插槽将父组件的内容发送到子组件的 <template> 中。
插槽
到目前为止，我们只是将组件用作自闭合标签，像这样在 <template> 中使用：
App.vue:
<template>
<slot-comp />
</template>相反，我们可以使用开始和结束标签，并在其中放置一些内容，例如文本。
App.vue:
<template>
<slot-comp>Hello World!</slot-comp>
</template>
但是，为了在组件中接收“Hello World！”并在我们的页面上显示它，我们需要在组件中使用 <slot> 标签。<slot> 标签充当内容的占位符，因此在构建应用程序后，<slot> 将被发送给它的内容替换。
插槽作为卡片
插槽还可以用于包装更大的动态 HTML 内容块，以获得类似卡片的外观。
早些时候，我们通过将数据作为属性发送到组件中来创建组件内部的内容，现在我们可以将 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> 的组件时，我们在 <slot> 周围使用一个 div，并在本地对 <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>
