(四)内置组件slot
2018-02-16 本文已影响0人
我拥抱着我的未来
本节知识点
- slot 使用
概述
- slot 是标签的内容扩展，也就是使用slot就可以在自定义组件中传递给组件的内容，接收内容并输出
- 模板里面可以直接输出
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js"></script>
<title>Slot content extend Demo</title>
</head>
<body>
<h1>Slot content extend Demo</h1>
<hr>
<div id="app">
<value>
<span slot="bolgUrl">{{value.bolgUrl}}</span>
<span slot="netName">{{value.netName}}</span>
<span slot="skill">{{value.skill}}</span>
</value>
</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 zujian={
template:'#tmp'
}
var app=new Vue({
el:'#app',
data:{
value:{
bolgUrl:'http://www.baidu.com',
netName:'哈哈',
skill:'Web前端'
}
},
components:{
"value":zujian
}
})
</script>
</body>
</html>
- 简单来说就是模板定义好了后，在组件里面利用slot再给页面传值
