Vue2.0 【第四季】第4节 内置组件 -slot讲解 Vue2.0 【第四季】第4节 内置组件 -slot讲解
第4节 内置组件 -slot讲解
slot是标签的内容扩展，也就是说：你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
先来定义一个<da0sy></da0sy>的组件，这个组件用来显示博主的一些信息。
我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）
data:{
da0syData:{
bolgUrl:'https://www.cnblogs.com/Elva3zora/',
netName:'da0sy',
skill:'Web前端'
}
},
我们用<template></template>标签的方式定义了组件：
<template >
<div>
<p>博客地址：</p>
<p>网名：</p>
<p>技术类型：</p>
</div>
</template>
我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。
slot的使用需要两步：
- 1、在HTML的组件中用slot属性传递值。
<da0sy>
<span slot="blogUrl">{{da0syData.blogUrl}}</span> //传递
<span slot="netName">{{da0syData.netName}}</span>
<span slot="skill">{{da0syData.skill}}</span>
</da0sy>
- 2、在组件模板中用标签接收值。
<template >
<div>
<p>博客地址：<slot name="blogUrl"></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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slot content extend Demo</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Slot content extend Demo</h1>
<hr>
<div >
<da0sy>
<span slot="blogUrl">{{da0syData.blogUrl}}</span> //传递
<span slot="netName">{{da0syData.netName}}</span>
<span slot="skill">{{da0syData.skill}}</span>
</da0sy>
</div>
<template >
<div>
<p>博客地址：<slot name="blogUrl"></slot></p>
<p>网名：<slot name="netName"></slot></p>
<p>技术类型：<slot name="skill"></slot></p>
</div>
</template>
<script type="text/javascript">
var da0sy = {
template:"#tep"
}
var app = new Vue({
el:'#app',
data:{
da0syData:{
blogUrl:'https://www.cnblogs.com/Elva3zora/',
netName:'Cardiac_Dejavu',
skill:"web前端"
}
},
components:{
"da0sy":da0sy
}
})
</script>
</body>
</html>
浏览器效果：