作用域插槽呢，是插槽的另外一种用法。物竞天择适者生存呐，为了不被信息时代抛弃，插槽只能凭借一己之力扮演多重身份，在下佩服佩服，不过我们还是言归正传。在了解作用域插槽之前呢，先要了解什么是作用域。
一、作用域
说白了，作用域就是变量的使用范围，那么本例的问题是该如果给变量找范围。一言不合就上代码，这是小编的风格⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
<body>
<div id="warp">
<cnp v-show="isShow"></cnp>
</div>
<template id="tem">
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
</template>
<script>
var vm = new Vue({
el:"#warp",
data:{
isShow:false
},
components:{
cnp:{
template:"#tem",
data(){
return {
isShow:true
}
}
}
}
})
</script>
</body>
还是老样子，Vue作为父组件，声明cnp子组件是局部变量，并且在Vue和cnp中都有变量isShow，只是取值不一样，在Vue中是false，在cnp中是true。
小编希望通过是否显示子组件cnp的内容来判断变量isShow的作用域。如果子组件cnp没有显示内容，说明使用的是Vue中的isShow，反之就是使用了子组件中的isShow。
大是显示内容，小是不显示内容，各位客官，买定离手了喂，买定离手了喂。
好了，小编不该聚众赌博 ￣□￣｜｜ 让我们谈回正经事儿
结果发现是不显示的，说明isShow用的是Vue中的数据。如果将Vue中的isShow修改为true，结果是显示的。这就涉及到了变量的作用域问题
官方给出的准则是这样的：父组件模板中的所有东西会在父级作用域内编译，子组件模板中的所有东西会在子级作用域内编译。比如上面的案例是在父组件的div模板中使用的，所以浏览器会到父组件中的data对变量isShow进行编译。
在懂了作用域的概念后，作用域的插槽就好办多了 o(￣︶￣)o
二、作用域插槽
作用域插槽呢，就是在父组件中替换插槽的标签，但是内容是由子组件提供的。这说的是啥？？？？？
没关系，先让我们来看一下下面的例子：
<body>
<div id="warp">
<cpn></cpn>
<cpn></cpn>
</div>
<template id="tem">
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</template>
<script>
var vm = new Vue({
el:"#warp",
components:{
cpn:{
template:"#tem",
data(){
return {
pLanguage:['JavaScript','Java','C++','C#']
}
}
}
}
})
</script>
</body>
这个例子中，我们通过在子组件中使用v-for指令使pLanguage的数据以列表的形式展示出来。
现在的需求是，我们希望在第二个子组件中，数据是“ JavaScript - Java - C++ - C# ” 这种形式展示的。这跟作用域插槽的作用是不是很像：在父组件中替换插槽的标签，但是内容是由子组件提供的。替换标签就相当于展示的形式不一样了嘛，内容依旧是子组件中的pLanguage提供。
目标已经十分的明确，首先是要获取子组件中的pLanguage数据，然后在父组件中修改自己想要的样式，小编觉得直接在子组件使用插槽，然后在父组件中修改样式就可以实现，于是乎写下了这样的代码：
<!-- 在父组件修改想要展示的形式 -->
<div id="warp">
<cpn></cpn>
<cpn>
<span v-for="item in pLanguage">{{item}} - </span>
</cpn>
</div>
<!-- 在子组件使用插槽 -->
<template id="tem">
<div>
<slot>
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
本以为离成功还差一步的时候，深刻体会到了一句话：现实是残酷的！
意思是说，pLanguage是子组件的数据，父组件是不能够直接访问子组件的数据的。但硬是要获取子组件的数据，怎么办呢？
这个时候就到了 作用域插槽 出场了使用作用域大概分成以下来两个步骤：
第一步：为slot设置属性，将子组件中的数据复制给属性
第二部：使用slot-scope 获取slot对象，通过slot.属性名来获取子组中的数据
比如：
<div id="warp">
<cpn></cpn>
<!-- 在父组件通过slot-scope获取到slot对象,并且通过slot.data获取子组件中的pLanguage -->
<cpn >
<div slot-scope="slot">
<span v-for="item in slot.data">{{item}} - </span>
</div>
</cpn>
</div>
<!-- 在子组件声明了名字为 data 的属性 -->
<template id="tem">
<div>
<slot :data='pLanguage'>
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
首先，显示的数据用插槽来表示，这样子当cnp没有书写别的格式时就可以直接使用slot中的格式
其次，为slot声明了属性data【当然，属性名是可以人任意的】，并且将pLanguage赋值给属性data，这就意味着data中的数据和pLanguage是一样的
然后，在父组件中使用slot-scope="slot" 获取到了slot对象，并且在slot对象中有个叫data的属性，这样就相当于父组件获取到了子组件pLanguage中的数据
最后，通过solt.data获取里面具体的元素，并且显示出来
这就是使用作用域插槽的过程，这个时候你就会很好理解在父组件中替换插槽的标签，但是内容是由子组件提供的这句话的含义
我知道，这里众多的读者中肯定有跟小编一样的强迫症患者，想把那个尾巴去掉
其实很简单，用join函数就好
<span>{{slot.data.join(' - ')}}</span>
小尾巴已经成功的去掉啦O(∩_∩)O哈哈~
❤今天的作用域插槽分享会到此结束啦，谢谢大家的聆听，我们下期见❤
❤❤记得点点赞唷(＾Ｕ＾)ノ~ＹＯ❤❤
