slot
是标签的内容扩展,也就是说你用slot
就可以在自定义组件时传递给组件内容,组件接收内容并输出。
先来定义一个组件,这个组件用来显示博主的一些信息。
我们在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、在组件模板中用标签接收值。
<template id="tmp">
<div>
<p>博客地址:<slot name="bolgUrl"></slot></p>
<p>网名:<slot name="netName"></slot></p>
<p>技术类型:<slot name="skill"></slot></p>
</div>
</template>
我们贴出这个案例的全部代码:
<!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>