在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="vue">
<todo>
<todo-title1 slot="todo-title" :title2="title1"></todo-title1>
<!-- <todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
<!-- 如下为简写-->
<todo-items1 slot="todo-items" v-for="item in todoItems" :item2="item"></todo-items1>
</todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component(‘todo‘,{
template:‘<div> <slot name="todo-title"></slot> <ul> <slot name="todo-items"></slot> </ul> </div>‘
});
Vue.component(‘todo-title1‘,{
props:[‘title2‘],
template:‘<div>{{title2}}</div>‘
});
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
Vue.component("todo-items1",{
props:["item2"],
template:"<li>{{item2}}</li>"
});
var vm = new Vue({
el:"#vue",
data:{
title1:"蟹镇上海历险记",
todoItems:[‘day1‘,‘day2‘,‘day3‘]
}
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/yuanlianyao/p/14731870.html