Vue 插槽
插槽卡片
插槽还可用于包裹较大的动态 html 内容块，以获得类似卡片的外观。
之前我们已经将数据作为 props 发送来在组件内创建内容，现在我们可以直接将 HTML 内容直接发送到 b1 标签内。
示例
App.vue:
<template>
<h3>Slots in Vue</h3>
<p>我们从 food 数组中创建类似卡片的 div 框。</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> <!-- 这个 div 使外观像卡片一样 -->
<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>我们从 food 数组中创建类似卡片的 div 框。</p>
<p>我们还通过重用相同的组件来创建类似卡片的页脚。</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>插槽后备内容</h3>
<p>未提供内容的组件可以在槽标签中包含后备内容。</p>
<slot-comp>
<!-- Empty -->
</slot-comp>
<slot-comp>
<h4>此内容由App.vue提供</h4>
</slot-comp>
</template>
SlotComp.vue:
<template>
<div>
<slot>
<h4>This is fallback content</h4>
</slot>
</div>
</template>
