插槽还可用于包裹较大的动态 html 内容块，以获得类似卡片的外观。
之前我们已经将数据作为 props 发送来在组件内创建内容，现在我们可以直接将 HTML 内容直接发送到 b1 标签内。
App.vue:
Slots in Vue
我们从 food 数组中创建类似卡片的 div 框。
![]()
{{x.name}}
{{x.desc}}
当内容进入 围绕内容生成卡片式框架的组件可以重复使用来创建不同的元素，但周围具有相同的卡片式框架。 在此示例中，我们使用与食品相同的组件来创建页脚。 我们从 food 数组中创建类似卡片的 div 框。 我们还通过重用相同的组件来创建类似卡片的页脚。 如果创建的组件没有内容，我们可以在 此应用程序中的第一个组件未提供任何内容，因此将呈现后备内容。 未提供内容的组件可以在槽标签中包含后备内容。SlotComp.vue:
运行示例 »
示例
App.vue:
运行示例 »
Reusable Slot Cards
{{x.name}}
后备内容
示例
App.vue:
插槽后备内容
此内容由App.vue提供
SlotComp.vue:
运行示例 »
This is fallback content
Vue 练习
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习
