作用域插槽 | 带数据的插槽
最后,就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽,实际上,对比前面两种插槽,我们可以叫它带数据的插槽。什么意思呢,就是前面两种,都是在组件的template里面写
匿名插槽
1
|
<
slot
></
slot
>
|
具名插槽
1
|
<
slot
name
=
"up"
></
slot
>
|
但是作用域插槽要求,在slot上面绑定数据。也就是你得写成大概下面这个样子。
1
2
3
4
5
6
7
8
|
<slot name=
"up"
:data=
"data"
></slot>
export
default
{
data:
function
(){
return
{
data: [
'zhangsan'
,
'lisi'
,
'wanwu'
,
'zhaoliu'
,
'tianqi'
,
'xiaoba'
]
}
},
}
|
我们前面说了,插槽最后显示不显示是看父组件有没有在child下面写模板,像下面那样。
1
2
3
|
<
child
>
html模板
</
child
>
|
写了,插槽就总得在浏览器上显示点东西,东西就是html该有的模样,没写,插槽就是空壳子,啥都没有。
OK,我们说有html模板的情况,就是父组件会往子组件插模板的情况,那到底插一套什么样的样式呢,这由父组件的html+css共同决定,但是这套样式里面的内容呢?
正因为作用域插槽绑定了一套数据,父组件可以拿来用。于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的。
我们再来对比,作用域插槽和单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件是提供的模板要既包括样式由包括内容的,上面的例子中,你看到的文字,“菜单1”,“菜单2”都是父组件自己提供的内容;而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。
下面的例子,你就能看到,父组件提供了三种样式(分别是flex、ul、直接显示),都没有提供数据,数据使用的都是子组件插槽自己绑定的那个人名数组。
父组件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<template>
<div class=
"father"
>
<h3>这里是父组件</h3>
<!--第一次使用:用flex展示数据-->
<child>
<template slot-scope=
"user"
>
<div class=
"tmpl"
>
<span v-
for
=
"item in user.data"
>{{item}}</span>
</div>
</template>
</child>
<!--第二次使用:用列表展示数据-->
<child>
<template slot-scope=
"user"
>
<ul>
<li v-
for
=
"item in user.data"
>{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用:直接显示数据-->
<child>
<template slot-scope=
"user"
>
{{user.data}}
</template>
</child>
<!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
|
子组件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div class=
"child"
>
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data=
"data"
></slot>
</div>
</template>
export
default
{
data:
function
(){
return
{
data: [
'zhangsan'
,
'lisi'
,
'wanwu'
,
'zhaoliu'
,
'tianqi'
,
'xiaoba'
]
}
}
}
|