slot插槽的使用情况不止一种.

注意: 文中所有的html采用pug模板,但是pug模板很好转换

1.子组件中只使用一个插槽

子组件中:

.child
    slot

父组件中:

.parent
    .child
        .box 从这一个dom层级开始放你想放的内容

2.子组件使用多个插槽,为方便区分它们,称之为"具名插槽"

子组件中:

.child
    slot(name="header")
    slot(name="footer")

 父组件中:

child
    .slot-div(slot='header')
       h1 header这个插槽部分需要填充的内容
    .slot-div(slot="footer")
       h1 footer这个插槽部分需要填充的内容
    h2 其他内容//不会显示,只有放在插槽中的内容才会显示