Vue 插槽 简要讲解与使用(图解)

重点:插槽是可以让组件内部的一些结构支持自定义的一项技术

插槽允许你在组件的模板中预留一些位置,以便父组件可以将任意内容插入到这些位置,从而增加了组件的灵活性和可重用性。

准备工作:

我们先封装一个组件,先提供代码:

 

 

一、默认插槽

简要讲解:

子组件写一个<slot></slot>标签占位,往父组件上面的子组件标签里填内容,内容会传到子组件里面的slot标签里,默认插槽只能有一个。

 

 

显示出来了的话就说明成功了

默认内容

如果想要在不传值的时候展示默认的内容的话可以直接写在slot标签里
这样的话如果传了内容进来的话会展示传进来的,不传值就会展示默认内容

 

 

 

二、具名插槽 

简要讲解:

子组件写一个<slot></slot>标签占位,并添加属性name=自定义名字:<slot name=text-1></slot>
父组件在子组件标签里添加template标签加上v-slot:或者#对应的名字即可在里面填写内容
具名插槽可以有多个

 具名插槽的使用方法就是这样

三、作用域插槽

简要讲解:

作用域插槽是插槽的一个传参语法,并不属于插槽分类,插槽种类只有默认和具名。
作用域插槽是在定义slot插槽的同时,是可以传值的。给插槽上绑定数据,将来使用组件时可以用。

 

 

 

 

 作用域插槽大概就这样,不懂的话欢迎在讨论区提问!
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值