前言
本文主要根据官方文档中的 slot 作用域插槽一栏，阅读后加上自己的一些理解和例子的补充。因为在参阅Vue官方文档时，有一些内容作者没有加上例子配合解释(可能觉得太简单了)，所以有些含糊不清，初学者不是很能理解，所以写了这个系列。在自己的理解上加上一些例子，希望能帮助你更好的理解。
应用场景
假设我们有这样一个全局组件：
Vue.component('current-user',{
data:function(){
return {
user:{
name:'张三',
age:22
}
}
},
template:`
<span>
<slot>{{user.name}}</slot>
</span>
`
})
如果我们简单的调用没有任何额外的业务需求，这个自然就足够了，如下直接使用就会打印出在组件插槽中设置的备用内容 user.name :
<div id="demo">
<current-user></current-user>
</div>
但是如果我们想在引用该组件时，改变它的备用内容，比如改成 user.age ,那么直接在调用时修改这样就可以？如下：
<div id="demo">
<current-user>{{user.age}}</current-user>
</div>
先来看官方文档给的一条规则：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
看完这条规则我们应该知道上面的那段代码当然不行，很显然会报错，因为在父级是无法直接访问到子组件里的变量 user 的。当然vue作者也想到了这一点，并给出了解决方法：作用域插槽。且看下文。
作用域插槽
实现这个方法需要两步：
- 首先在子组件里把需要访问的变量绑定到插槽的一个属性上(
v-bind)。如下先把user变量绑定给了slot的user属性。
Vue.component('current-user',{
data:function(){
return {
user:{
name:'张三',
age:22
}
}
},
template:`
<span>
<slot :user="user">{{user.name}}</slot>
</span>
`
})
- 在父级调用该组件时使用带值的
v-slot来定义我们提供的插槽 prop 的名字，如下：
<div id="demo">
<current-user v-slot="parentUser">{{parentUser.user.age}}</current-user>
</div>
至此我们就可以在父级作用域去访问组件内的变量了！
