vue中的slot与slot-scope

插槽:也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。slot最核心的两个问题点:显示不显示和怎样显示。
由于插槽是个模板,所以对于任何一个组件,从模板种类的角度来分,可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板,例如“div、span、ul、table”,非插槽模板的显示与隐藏以及怎样显示由插件自身控制。
插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。
单个插槽|默认插槽|匿名插槽
三种加法意思一样。
单个插槽可以放置在组件的任何位置,但一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。
具名插槽
匿名插槽没有name属性,所以是匿名插槽,那么,插槽加了name属性,就变成了具名插槽。具名插槽可以在一个组件中出现N次,出现在不同的位置。
作用域插槽 | 带数据的插槽
作用域插槽要求,在slot上面绑定数据。正因为作用域插槽绑定了一套数据,父组件可以拿来用。于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 下面这篇文...
    TRYao阅读 811评论 1 0
  • vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。不...
    张培跃阅读 22,205评论 1 23
  • 前言 记录平时学到的知识,标题写的大气一点,也算是给自己一点鼓励,希望在技术这条路可以远走越远,路越走越宽~ 文中...
    徐国军_plus阅读 1,337评论 0 12
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,656评论 0 32
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,870评论 5 14