vue slot scope使用_Vue学习笔记之组件化的高级应用:插槽slot的使用

1、插槽slot的使用:

slot,插槽,可以理解为我们现实生活中类似电脑USB的插槽,插入的东西不用,则功能就不一样。所以组件用插槽是为了封装的组件更加具有扩展性,让使用者来决定组件内部使用什么功能。

插槽的使用规则:抽取共性,保留不同,即为将共性抽取到组件中,将不同暴露为插槽。

3f50c28c6c2c35fb29ffa8d3565ca144.png

同时插槽里面可以个默认值:在引用组件的时候,没有说明使用什么的时候,就会显示此默认值:

ed258c1a62785e7c8735f9ad190947fc.png

2、具名插槽的使用:具名,其实就可以理解为给插槽起一个唯一的标识名称,类似key的属性,在使用的时候通过name来指定替换哪个插槽,如果在引用的时候,没有制定替换哪个name,则用默认值显示子组件中的各个属性:

9c9e88714d1161852eb969cdd1c307b0.png

3、编译的作用域:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西多会在子级作用域内编译。即是:在用任何数据时,它都会在本组件里面去寻找相应的数据,即为父组件在父组件的data找数据,子组件在子组件的data找数据:

31cb2d3c83056bf6c775f8433c93b9fd.png

4、作用域插槽:父组件替换插槽的标签,但是内容(数据或方法)由子组件来提供。

先给插槽一个属性,data 是自定义名称,然后父组件通过solt-scope 来实现绑定子组件的数据:

487d4bb6b72333f5d188c24aee8866d4.png

多个数据的时候,可以自定义名称:

8b8a737a929abe4b32e675b17b1255f6.png

PS:join是通过某个字符串连接或分割字符串。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值