1. 无名插槽：

• 直接写需要插入的内容即可，内容将会插入到 所有 无名插槽中。

var tab = {//js定义无名插槽
    template:`
        <div>
            <footer>
                <slot></slot>
            </footer>
        </div>
    `
}
var vm = new Vue({...略

html中:

<div id="app">
    <tab>
        <div>hello world</div>
    </tab>
</div>

2. 具名插槽：

• 需要在插槽中添加一个name属性( 不能自定义！)；
• 使用时要将内容写在 template 标签中，并且通过 v-slot:name 指令来指定插入的具体标签位置。

var tab = {//js定义具名插槽
    template:`
        <div>
            <header>
                <slot name="header"></slot>
            </header>
        </div>
    `
}
var vm = new Vue({...略

html中:

<div id="app">
    <tab>
        <template v-slot:header>
            <div>我插入到了header元素里面</div>
        </template>
    </tab>
</div>