服务器slot槽位位置,slot插槽的使用

1.什么是插槽

插槽,可以理解为在组件中留有一个入口,方便其他组件在使用的时候,添加其他的特有的属性。

子组件child:

这是子组件

父组件:

这里的数据会插入到子组件的slot里面

2.编译的作用域

在父组件中,无法使用子组件插槽中的数据,因为父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子作用域中编译的。

3.默认的插槽内容

子组件child:

默认的插槽内容

这是子组件

父组件:

如果父组件中没有在对应的插槽的位置设置内容,默认就展示插槽中的内容。

4.具名插槽

有可能在一个组件中,需要开放多个入口,那么就需要唯一标识去区分开来,这就需要slot 的name属性来做处理了。

子组件child:

默认的插槽内容

这是具名插槽

这是子组件

父组件:

然后 没有使用name 属性的时候,其实,默认name 是default的。

5.作用域插槽

是将插槽中的作用域传到在使用插槽的组件中,

子组件child:

{{user}}

这是子组件

data() {

return {

user:name

}

}

父组件:

{{data.user}}

6.具名插槽的缩写

替换v-slot: ,即v-slot:test可以用 #test代替。

7.总结

我认为插槽的是使用,可以是对于同一个组件但是,不同的组件进行应用的是时候有不同的内容展示,这种时候可以使用插槽,就比如封装的表格组件,这个组件对操作这块使用插槽留有一个入口,不能的模块在调用的时候,可以实现操作按钮不同,比如A模块,其操作按钮只有修改功能,B模块,其操作按钮有修改和删除功能,使用插槽之后,就可以实现。

这样,其实,也实现了“低耦合,高内聚”的作用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值