插槽---作用域插槽

一.插槽分类

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

二.使用场景

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

三.基础使用

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

匿名插槽

子组件中:

父组件中:

效果:

具名插槽

子组件中:

 父组件中:

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

 效果:

 作用域插槽:

父组件: 

 子组件1:

子组件2:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值