Vue slot插槽使用

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

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

子组件中:

child
    .slot

父组件中:

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

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

子组件中:

.child
    <slot name="header"></slot>
    <slot name="footer"></slot>

 父组件中:

child
    <template v-slot:header>
       <h1>header这个插槽部分需要填充的内容</h1>
    </template>
    <template v-slot:header>
       <h1>footer这个插槽部分需要填充的内容</h1>
    </template>    h2 其他内容//不会显示,只有放在插槽中的内容才会显示