一.插槽分类

插槽分为匿名插槽、具名插槽、作用域插槽。子组件中匿名插槽只能有一个;可以有多个具名插槽;作用域插槽中可以有匿名插槽和具名插槽。

二.使用场景

当项目中一个组件可以多次复用时,我们可以把这个组件封装成单独的.vue文件,从而可以在不同的页面中引入该组件,从而实现组件的复用,我们称这个.vue文件为子组件,需要用到这个子组件的页面我们称为父组件。当子组件中可以决定自己的大概结构,但是有些内容的展示与否,或者展示的形式子组件不能决定,需要由父组件来决定之后传给子组件时,需要使用到作用域插槽(匿名插槽和具名插槽辅助作用域插槽),父组件决定内容,子组件决定位置

三.基础使用

子组件通过slot为父组件传递过来的内容进行占位,父组件将数据传递过来填充slot

匿名插槽

子组件中:

父组件中:

效果:

具名插槽

子组件中:

 父组件中:

目前父组件中通过v-slot:header来写

 效果:

 作用域插槽:

父组件: 

 子组件1:

子组件2:

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐