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>