Vue - 内置组件 -slot 父组件向子组件传值
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）1234567data:{ jspangData:{
·
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。
我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）
|
1
2
3
4
5
6
7
|
data
:
{
jspangData
:
{
bolgUrl
:
'http://jspang.com'
,
netName
:
'技术胖'
,
skill
:
'Web前端'
}
}
,
|
我们用<template></template>标签的方式定义了组件：
|
1
2
3
4
5
6
7
8
|
<template
id
=
"tmp"
>
<div>
<p>
博客地址：
</p>
<p>
网名：
</p>
<p>
技术类型：
</p>
</div>
</template>
|
我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。
slot的使用需要两步：
1、在HTML的组件中用slot属性传递值。
|
1
2
3
4
5
|
<jspang>
<span
slot
=
"bolgUrl"
>
{{jspangData.bolgUrl}}
</span>
<span
slot
=
"netName"
>
{{jspangData.netName}}
</span>
<span
slot
=
"skill"
>
{{jspangData.skill}}
</span>
</jspang>
|
2、在组件模板中用<slot></slot>标签接收值。
|
1
2
3
4
5
6
7
8
|
<template
id
=
"tmp"
>
<div>
<p>
博客地址：
<slot
name
=
"bolgUrl"
>
</slot>
</p>
<p>
网名：
<slot
name
=
"netName"
>
</slot>
</p>
<p>
技术类型：
<slot
name
=
"skill"
>
</slot>
</p>
</div>
</template>
|
我们贴出这个案例的全部代码：
|
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
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
Slot content extend Demo
</title>
</head>
<body>
<h1>
Slot content extend Demo
</h1>
<hr>
<div
id
=
"app"
>
<jspang>
<span
slot
=
"bolgUrl"
>
{{jspangData.bolgUrl}}
</span>
<span
slot
=
"netName"
>
{{jspangData.netName}}
</span>
<span
slot
=
"skill"
>
{{jspangData.skill}}
</span>
</jspang>
</div>
<template
id
=
"tmp"
>
<div>
<p>
博客地址：
<slot
name
=
"bolgUrl"
>
</slot>
</p>
<p>
网名：
<slot
name
=
"netName"
>
</slot>
</p>
<p>
技术类型：
<slot
name
=
"skill"
>
</slot>
</p>
</div>
</template>
<script type="text/javascript">
var
jspang
=
{
template
:
'#tmp'
}
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
jspangData
:
{
bolgUrl
:
'http://jspang.com'
,
netName
:
'技术胖'
,
skill
:
'Web前端'
}
}
,
components
:
{
"jspang"
:
jspang
}
}
)
</script>
</body>
</html>
|
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献5条内容
所有评论(0)