跳转至

VUE-插槽详细图解

Vue插槽, 是学习vue中必不可少的一节, 在渲染时,组件标签中的内容会覆盖组件中的插槽插槽

当初刚接触vue的时候, 对这些掌握的一知半解, 特别是作用域插槽一直没明白, 直到最近复习前端知识的时候, 了解了一些需求, 再联想到插槽的特性, 突然豁然开朗

1. 普通插槽

  • 通常来说我们组件中内的标签是无法放任何外部组件内容的 20755-twx026yic3f.png
  • 如果想子组件中的内容, 由外部的组件来决定我们可以使用普通插槽,在组件内声明 slot 标签 26662-9jsos828r9i.png
  • 很多时候,我们只是想预留一个插槽但是还没有想好放什么东西,可以设置插槽的默认值,那么在组件中是空的时候可以渲染设置好的默认值 24766-7lbuc02qunu.png

2. 具名插槽

  • 具名插槽，顾名思义就是给这个插槽起个名字,插槽在使用 name 属性绑定名字后, 在组件被调用的时候,组件内的标签通过 slot 属性来决定某个标签具体渲染哪一个插槽 94497-pvnblb7ch09.png

3. 作用域插槽

  • 要想了解作用域插槽, 先了解需求之后比较好理解: 有时候数据在子组件中,但是却想让父组件来决定具体怎么展示
  • 这时候我们可以通过作用域插槽, 让子组件通过属性绑定的方式,把子组件的数据绑定到子组件中的某个属性上
  • 父组件就可以通过slot-scope = slot拿到子组件中挂载在插槽中的数据,之后通过 比如 slot.attribute 来得到具体的数据(ps: elementui 中的表格就是使用的作用域插槽)
  • 注意在父组件中,如果要拿到子组件通过属性绑定在插槽中的数据需要使用 template 标签 32996-qxxy0ygtsng.png