Vue插槽slot

Vue 实现了一套内容分发的 API,将 元素作为承载分发内容的出口。大致如下
parent为父组件,child为子组件

  • 普通插槽



msg:'父组件普通插槽'

显示效果:
父组件普通插槽 可以不用标签

  • 具名插槽

注意:v-slot是新指令,代替slot和slot-scope,版本需要在 2.6.0 以上



显示效果:
这是第三个具名插槽
这是第一个具名插槽
这是第二个具名插槽
third

当前vue版本为: "^2.5.2",导致子组件中的third也显示出来了

  • 作用域插槽

父组件可以控制插槽的内容,能够访问子组件中才有的数据
注意:scope在2.5.0中被slot-scope替代,用法:除了scope只可以用于