slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出。
转自http://jspang.com/2017/04/09/vue2_4/4/
先来定义一个<jspang></jspang>的组件,这个组件用来显示博主的一些信息。
我们在Vue 构造器里的data中给出了信息,信息如下:(博客地址,网名,使用技能)
| data:{ jspangData:{ bolgUrl:'http://jspang.com', netName:'技术胖', skill:'Web前端' } }, |
我们用<template></template>标签的方式定义了组件:
|
<template
id="tmp">
<div>
<p>博客地址:</p>
<p>网名:</p>
<p>技术类型:</p>
</div>
</template>
|
我们现在就可以用slot功能让组件接收传递过来的值,并在模板中接收显示。
slot的使用需要两步:
1、在HTML的组件中用slot属性传递值。
| <jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang> |
2、在组件模板中用<slot></slot>标签接收值。
|
<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>
|