插槽:也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。slot最核心的两个问题点:显示不显示和怎样显示。
由于插槽是个模板,所以对于任何一个组件,从模板种类的角度来分,可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板,例如“div、span、ul、table”,非插槽模板的显示与隐藏以及怎样显示由插件自身控制。
插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。
单个插槽|默认插槽|匿名插槽
三种加法意思一样。
单个插槽可以放置在组件的任何位置,但一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。
具名插槽
匿名插槽没有name属性,所以是匿名插槽,那么,插槽加了name属性,就变成了具名插槽。具名插槽可以在一个组件中出现N次,出现在不同的位置。
作用域插槽 | 带数据的插槽
作用域插槽要求,在slot上面绑定数据。正因为作用域插槽绑定了一套数据,父组件可以拿来用。于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的。
vue中的slot与slot-scope
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。不...