slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
我们先来定义一个<xiaofan></xiaofan>的组件，这个组件用来显示博主的一些信息。
data:{ xiaofan:{ blogUrl:"http://www.cnblogs.com/xiaofandegeng/", webName:"xiaofandegeng", skill:"初级web前端" } },
我们用<template></template>标签的方式定义了组件：
<template id="demo">
<div>
<p>博客地址：<slot name="blogUrl"></slot> </p>
<p>网名：<slot name="webName"></slot> </p>
<p>技术类型：<slot name="skill"></slot> </p>
</div>
</template>
我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。
<div id="app">
<xiaofan>
<span slot="blogUrl"> {{xiaofan.blogUrl}} </span>
<span slot="webName"> {{xiaofan.webName}} </span>
<span slot="skill"> {{xiaofan.skill}} </span>
</xiaofan>
</div>
<template id="demo">
<div>
<p>博客地址：<slot name="blogUrl"></slot> </p>
<p>网名：<slot name="webName"></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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内置组件 -slot讲解</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>内置组件 -slot讲解</h1>
<hr>
<div id="app">
<xiaofan>
<span slot="blogUrl"> {{xiaofan.blogUrl}} </span>
<span slot="webName"> {{xiaofan.webName}} </span>
<span slot="skill"> {{xiaofan.skill}} </span>
</xiaofan>
</div>
<template id="demo">
<div>
<p>博客地址：<slot name="blogUrl"></slot> </p>
<p>网名：<slot name="webName"></slot> </p>
<p>技术类型：<slot name="skill"></slot> </p>
</div>
</template>
<script type="text/javascript">
var xiaofan = {
template:"#demo"
};
var app = new Vue({
el: "#app",
data:{
xiaofan:{
blogUrl:"http://www.cnblogs.com/xiaofandegeng/",
webName:"xiaofandegeng",
skill:"初级web前端"
}
},
components:{
"xiaofan":xiaofan
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/xiaofandegeng/p/9005120.html