Vue 中插槽的使用总结

默认插槽

首先做一个页面:

Vue 中插槽的使用总结_第1张图片

新增 Category.vue






App.vue 中使用






现在修改需求,每个分类都要展示不同的内容:

Vue 中插槽的使用总结_第2张图片

这里就用到了插槽,修改 Category.vue





修改 App.vue





具名插槽

修改 Category.vue





修改 App.vue





作用域插槽

Vue 中插槽的使用总结_第3张图片

如果数据在 Category 中,但需要展示不同的形式,我们可以通过插槽传值,类似于我们从父组件向子组件传值:





App 中在子组件中使用