首先说说什么是插槽吧，插槽是vue为组件的封装者提供的能力，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
通俗一点理解的话，可以把插槽认为是组件封装期间，为用户预留的内容占位符。
作用域插槽便是插槽中的一种，在封装组件的过程中，可以为预留的< slot >插槽绑定 props 数据，这种带有 props 数据的< slot >叫做作用域插槽。
示例代码如下:
//父组件
<template #content="scope">
<div>
<p>啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨</p>
<p>{{ scope.msg }}</p>
</div>
</template>
//子组件
<div class="content-box">
<!-- 字啊封装组件中，为预留的slot提供属性对应的值，这种用法叫做作用域插槽 -->
<slot name="content" msg="hello vue.js"></slot>
</div>
在< slot >里面添加的属性与数据msg="hello vue.js",便是作用域插槽了，而数据"hello vue.js"，便会渲染到上面父组件盒子中，会显示"hello vue.js"。
使用作用域插槽可以让父组件访问到子组件里面的值，将msg里面的值传递到父组件div盒子中，相当于子向父传值，利用作用域插槽，比自定义事件简便了许多，大大减少了代码量以及代码的复杂程度。
tips：
1.v-slot是在向具名插槽（作用域插槽去除绑定的props数据便是具名插槽）提供内容时，在< template >元素上使用的指令，以v-slot的参数形式提供其名称，上述代码中“#”便是v-slot的简写形式。
2.scope代表的就是作用域，意思是通过作用域插槽，提供一些作用域数据，这里用scope更加合适，用obj之类的也是可以的。不过尽量遵守标准。（这里的scope与style里面的scoped没有任何联系，scoped是防止样式冲突的一个属性，这里的scope是一个形参）
