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

前言

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

开门见山

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

结束语

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