一.插槽分类
插槽分为匿名插槽、具名插槽、作用域插槽。子组件中匿名插槽只能有一个;可以有多个具名插槽;作用域插槽中可以有匿名插槽和具名插槽。
二.使用场景
当项目中一个组件可以多次复用时,我们可以把这个组件封装成单独的.vue文件,从而可以在不同的页面中引入该组件,从而实现组件的复用,我们称这个.vue文件为子组件,需要用到这个子组件的页面我们称为父组件。当子组件中可以决定自己的大概结构,但是有些内容的展示与否,或者展示的形式子组件不能决定,需要由父组件来决定之后传给子组件时,需要使用到作用域插槽(匿名插槽和具名插槽辅助作用域插槽),父组件决定内容,子组件决定位置。
三.基础使用
子组件通过slot为父组件传递过来的内容进行占位,父组件将数据传递过来填充slot
匿名插槽
子组件中:
父组件中:
效果:
具名插槽
子组件中:
父组件中:
目前父组件中通过v-slot:header来写
效果:
作用域插槽:
父组件:
子组件1:
子组件2: