Vue中插槽的使用

一、具名插槽

在一个封装好的组件中展示一些不确定的内容,或者是在封装好的组件上增加一些内容,有两种方案

  • 在组件内部把未来可能要使用到的内容全部开发好,基于用户调取组件的时候,是否传递了对应的属性来决定是否展示和隐藏「不够灵活」

  • 基于插槽方案实现组件的扩展,在封装组价的时候先预留出位置,位置留好之后,后期调用这个组件的时候,可以向这个插槽位置插入不同的内容

  • 使用插槽的时候,尽量使用具名插槽,如果向多个插槽传递信息,一般都有template包起来

    • $slots记录的是所有的插槽

    • 如果插槽不写name属性,默认是default

image.png

image.png

image.png

  • 在$slots中存储着所有的插槽信息

image.png

image.png

作用域插槽

把组件内的数据,放在调用组件的时候,给插槽传递信息的时候也可以用

image.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享