关于vue slot组件以及v-slot指令的一些思考

本文探讨Vue2.6.x及以上版本中的Slot特性,重点在于内容分发的理解和应用。通过图文解释,阐述了Slot如何将父组件内容分布到子组件的多个插槽中,特别是具名插槽的使用,强调了数据的双向性。阅读后,有助于读者更好地掌握官方文档并提升对Vue Slot机制的理解。
摘要由CSDN通过智能技术生成

前言

  1. 本文只讨论vue2.6.x以上的版本。以前的API已经被depreciated,详见官方文档
  2. 官方文档已经描述的足够清晰和简单,我只是通过用图例的方式加强印象

开门见山

vue的slot也就内容分发,仔细思考这个名字就不难发现,他是将父组件的内容分发到子组件中的多个<slot></slot>组件中。所以下图形象描述了分发的概念。
在这里插入图片描述
具名插槽就是可以根据名字选择性的插入,如图
在这里插入图片描述
最后,数据可以是双向的。
在这里插入图片描述
在此之后,再去看官方文档就会容易多了。

结束语

有时候感觉要学的内容复杂程度,可能在于你怎么去理解。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值