一、作用域
父组件模板的内容是在父组件作用域内编译的，子组件模板的内容实在子组件作用域内编译的。
二、slot用法
单个slot
在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签集他的内容。
<body>
<div id="app">
<child-component>
<p>这是一行文本</p>
</child-component>
</div>
</body>
<script>
Vue.component('child-component',{
template:'\
<div class="test">\
<slot>\
<p>如果父组件没有内容，将作为默认出现</p>\
</slot>\
</div>'
})
var app = new Vue({
el:'#app',
});子组件child-component的模板内定义了一个<slot>元素，并且用一个<p>作为默认的内容。在父组件没有使用slot时，会渲染这段默认的元素。如果写入了slot，那就会替换整个<slot>。
上述代码的执行结果如图所示：
如果改为下面：
<div id="app">
<child-component>
</child-component>
<p>这是一行文本</p>
</div>则执行结果为：
具名slot
给<slot>元素指定一个name后可以分发多个内容，具名Slot可以与单个Slot共存：
<body>
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<p>更多的正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
</body>
<script>
Vue.component('child-component',{
template:'\
<div class="container">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
});
var app = new Vue({
el:'#app',
});
</script>在<div class="main">内的<slot>没有使用Name特性，他将作为默认的slot出现，父组件中没有使用slot特性的元素都将出现在这里。如果没有指定默认的匿名slot,父类中多余的内容片段都将被抛弃。
作用域插槽
作用域插槽是一种特殊的slot，使用一个可以复用的模板替换一个已渲染的元素
<body>
<div id="app">
<my-list :books="books">
<!--作用域插槽也可以是具名的slot-->
<template slot="book" scope="props">
<li>{{ props.bookName }}</li>
</template>
</my-list>
</div>
</body>
<script>
Vue.component('my-list',
{
props:{
books:{
type:Array,
default:function () {
return [];
}
}
},
template:'\
<ul>\
<slot name="book"\
v-for="book in books"\
:book-name="book.name">\
</slot>\
</ul>'
});
var app = new Vue({
el:'#app',
data:{
books:[
{ name:'《vue.js实战》'},
{ name:'《Javascript语言精粹》'},
{ name:'《Javascript高级程序设计》'}
]
}
})