一、普通插槽
<template>
<div class="slot-demo">
<slot>this is slot default content text.</slot>
</div>
</template>
1
2
3
4
5
2
3
4
5
然后我们直接使用，页面则正常显示一下内容
this is slot default content text.
1
然后，这个时候我们使用的时候，对 slot 内容进行覆盖
<slot-demo>this is slot custom content.</slot-demo>
1
内容则变成如下所示
this is slot custom content.
1
二、具名插槽
<template>
<div class="slot-demo">
<slot name='demoA'>我只欢迎name为demoA的.</slot>
<slot>this is slot default content text.</slot>
</div>
</template>
1
2
3
4
5
6
2
3
4
5
6
然后我们直接使用，页面则正常显示一下内容
我只欢迎name为demoA的.
this is slot default content text.
1
2
2
然后，这个时候我们使用的时候，对 slot 内容进行覆盖
<slot-demo>
<div solt='demoA'>我就是slot的name为demoA要的数据</div>
this is slot custom content.
</slot-demo>
1
2
3
4
2
3
4
内容则变成如下所示
我就是slot的name为demoA要的数据
this is slot custom content.
1
2
2
三、作用域插槽
先来个相关的例子
先这样
<template>
<div class="slot-demo">
<slot text="this is a slot demo , " :msg="msg"></slot>
</div>
</template>
<script>
export default {
name: 'SlotDemo',
data () {
return {
msg: 'this is scoped slot content.'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
然后再这样
<template>
<div class="parent-slot">
<slot-demo>
<template slot-scope="scope">
<p>{{ scope.text }}</p>
<p>{{ scope.msg }}</p>
</template>
</slot-demo>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
最后这样
this is a slot demo
this is scoped slot content.
1
2
2
从使用层面我们能看出来，子组件的 slot 标签上绑定了一个 text 以及 :msg 属性。然后父组件在使用插槽使用了 slot-scope 属性去读取插槽带的属性对应的值,这样也类似于子组件向父组件传值;
四、v-slot
vue 2.6.x 已经出来有一段时间了，其中对于插槽这块则是放弃了 slot-scope 作用域插槽推荐写法，直接改成了 v-slot 指令形式的推荐写法(当然这只是个语法糖而已)；
看下面例子
<template>
<div class="slot-demo">
<slot name="demo">this is demo slot.</slot>
<slot text="this is a slot demo , " :msg="msg"></slot>
</div>
</template>
<script>
export default {
name: 'SlotDemo',
data () {
return {
msg: 'this is scoped slot content.'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
然后进行使用
<template>
<slot-demo>
<template v-slot:demo>this is custom slot.</template>
<template v-slot="scope">
<p>{{ scope.text }}{{ scope.msg }}</p>
</template>
</slot-demo>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
显示
this is demo slot.
this is a slot demo ,this is scoped slot content.
1
2
3
2
3
看着好 easy 。