Vue插槽slot

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

• 普通插槽

<template>
    <div class="parent">
        <com-child>
            <!-- 父组件在子组件里面插入标签，然后子组件引用slot就可以看到插槽内容 -->
            <span>{{msg}}</span> 可以不用标签
        </com-child>
    </div>
</template>

msg:'父组件普通插槽'

<template>
    <div class="child">
        <!-- 默认/default插槽 -->
        <slot>父组件没有插入内容时，此内容会显示，否则会被插入的内容覆盖</slot>
    </div>
</template>

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

• 具名插槽

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

<template>
    <div class="parent">
        <com-child>
            <template slot=first>
                <div>这是第一个具名插槽</div>
            </template>
            <div slot='second'>这是第二个具名插槽</div>
            <template v-slot:third>
                <p>这是第三个具名插槽</p>
            </template>
        </com-child>
    </div>
</template>

<template>
    <div class="child">
        <slot name='first'>first</slot>
        <slot name='second'>second</slot>
        <slot name='third'>third</slot>
    </div>
</template>

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

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

• 作用域插槽

父组件可以控制插槽的内容，能够访问子组件中才有的数据
注意：scope在2.5.0中被slot-scope替代，用法：除了scope只可以用于<template>元素，其他和slot-scope都相同

<template>
    <div class="parent">
        <template slot=itemSlot slot-scope="slotProps">
            <li>{{slotProps.itemid + ' & ' + slotProps.text}}</li>
        </template>
    </div>
</template>

<template>
    <div class="child">
        <slot name="itemSlot" v-for="item in items" 
          :text="item.text" 
          :itemid="item.id">
          默认值
        </slot>
    </div>
</template>

items:[
  {id:1,text:'第1段'},
  {id:2,text:'第2段'},
  {id:3,text:'第3段'},
]

显示效果：
1 & 第1段
2 & 第2段
3 & 第3段