slot通俗理解：是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容； Slot使用
会输出：两个红色的hello world，以及一个使用slot的默认内容 注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；
使用时候子组件标签<Child>中要有<template slot-scope=”scopeName”>标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；
作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：
<ul> <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" > slot的默认内容 </slot> </ul> <Child> <template slot="item" slot-scope="props"> <li>{{props.myname}}</li> </template> </Child> 或者 //子组件 <div class="box" v-for="item of list" :key="item.id"> <div class="box-title"> <p> <span>{{item.deNo}}</span> <!--我们为每个item准备了一个插槽，将item对象作为一个插槽的prop传入--> <slot class="genre" v-bind:item="item"></slot> </p> <p>{{item.deDate}}</p> </div> </div> //父组件 <div> <!--1.作用域插槽必须是template开头和结尾的内容--> <!--2.slot-scope="props"声明从子组件传递的数据都放在props里--> <!--3.加上v-if="props.item!=undefined"判断，防止取不到item的属性--> <template slot-scope="props" v-if="props.item!=undefined"> <!--告诉子组件模板的信息是以<span>标签的形式--> <span class="genre">{{props.item.state}}</span> </template> </div>总
<body> <div id="app"> <hello> <p slot="yidong">移动卡</p> <p slot="liantong">联通卡</p> </hello> <hr> <hello></hello> <hr> <hello> <p slot="yidong">移动卡</p> </hello> </div> <template id="hello"> <div> <slot name="yidong"></slot> <p> 我是hello</p> <slot name="liantong"></slot> </div> </template> </body> <script src="./base/vue.js"></script> <script> //在组件标签内部写入的内容默认的会被替换掉， //如果想要在组件的模板里使用这些内容， //就在对应的位置写上slot标签，这个slot标签就代表着这些内容 Vue.component("hello",{ template:"#hello" }) new Vue({ el:"#app", }) </script>//2.6+ 支持v-slot指令 可以实现作用域槽口
<body> <div id="app"> <hello> <template v-slot:p1="info">我是p标签 -- {{info.msg}} -- {{info.arr}}</template> </hello> <hr> <hello> <template v-slot:p1="info">{{info.arr.slice(2)}}</template> </hello> </div> <template id="hello"> <div> <slot name="p1" :msg="msg" :arr="arr"></slot> </div> </template> </body> <script src="./base/vue.js"></script> <script> Vue.component("hello",{ template:"#hello", data(){ return { msg:"你好", arr:[1,2,3,4,5] } } }) new Vue({ el:"#app", })