虽然还有很多学生找到了这篇文章，但这篇文章是笔者早期写的，现在回想起来发现有太多的不足。 为了不误认子弟，重写了Vue slot的详细内容，有需要的学生请试着进行浏览。
虽然百度上已经有很多关于slot-scope的文章，但我觉得我是一群以前没有学好，又回头学习的人。 他们正在使用. Vue文件。 我觉得有点不适合初学者，所以写面向初学者的文章。
先扔常规：
！ 通过doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title组件的插槽(slot )输入内容/title script src='您的vue地址请下载最新版的(/scriptsrc )/strong slot/slot /div `，data : function ({ return { name : ' Perry ' } )； //命名插槽vue.component(slot-name，) template: ) divheaderslotname=' header '/slot/headermainslot/mame { inheritAttrs:false，props3360 ) todos:(Array，Object] } ) }，template 360 slot 3360 data=' todo ' { { todo.texext }/scriptstyleli { list-style : none； 显示：在线块； 字体大小： 25px； } /style/headbody div id='app '！ -1、插槽内容slot是组件----test-slotsomethingbadhappened .你是谁？ 我认识你吗/test-slottest-slotsomethingbadhappened . -允许使用变量，但此变量必须在此范围内才能生效。 其中name的值为“旁道”-- h3标题{{name}}
</h3> <img src="img/flower.jfif" alt="图片无法显示"> </test-slot> <!--2、具名插槽 slo有一个特殊的属性name,可以使插槽具名--> <slot-name> <h3>劝学</h3> <p>少壮不努力，老大徒伤悲</p> <p>光阴似箭，日月如梭</p> <template slot="header"> <ul > <li>主页</li> <li>关于时间</li> <li>关于人生</li> <li>关于未来</li> </ul> </template> <p>你好啊</p> <p slot="footer"> <p>结尾</p> <p>粤ICP备6545646456415</p> </p> </slot-name> <!--使用作用域插槽，通过slot-scope实现--> <todo-list :todos="todos"> <template slot-scope="slotProps"> <span v-if="slotProps.data.isTrue">√</span> {{slotProps.data.text}} </template> </todo-list> <!--使用ES2015结构语法--> <todo-list :todos="todos"> <template slot-scope="{data}"> <span v-if="data.isTrue">√</span> {{data.text}} </template> </todo-list> </div> <script> new Vue({ el:"#app", data:{ name:"岔道口", todos:[ {text:"A",id:1,isTrue:true}, {text:"B",id:2,isTrue:true}, {text:"C",id:3,isTrue:false}, {text:"D",id:4,isTrue:true}, ], // slotProps:"" } }) </script></body></html>例程中也写了普通插槽和具名插槽，这个我就不说，我就说一下作用域插槽。首先从“作用域插槽“”这个名字说起，本来你父组件的模板是无法使用到子组件模板中的数据，官网中有一句特别强调的话：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。这句话其实挺难理解，举个例子就知道了，
<test-slot>
Something bad happened.
<!--允许使用变量，但该变量必须是本作用域的才会生效，这里name的值将会是"岔道口"-->
<h3>标题{{name}}</h3>
<img src="img/flower.jfif" alt="图片无法显示">
</test-slot>
这是我上面的例子，也就是说这里name必须是当前组件里的，不能是test-slot这个组件内部的数据，这是它作用域限制，name这个数据属于父组件的作用域，所以只能是父组件的数据。但是slot-scope的出现却实现了父组件调用子组件内部的数据，子组件的数据通过slot-scope属性传递到了父组件
// 作用域插槽 Vue.component("todo-list",{ inheritAttrs:false, props:{ todos:[Array,Object] }, template: `<ul> <li v-for="todo in todos" :key="todo.id" style="display: block;" > //这里的：data=“todo”就是讲子组件todo这个数据传给了父组件 <slot :data="todo">{{todo.text}}</slot>//todo.text是默认值，父组件会把它覆盖掉 </li> </ul> ` }); <!--使用作用域插槽，通过slot-scope实现--><todo-list :todos="todos"> <template slot-scope="slotProps"> <span v-if="slotProps.data.isTrue">√</span> {{slotProps.data.text}} </template></todo-list>使用的时候就是这样，从子组件传过来的名为data值为todo的数据将会被slot-scope接收，需要注意的是，slot-scope接收的是一个对象，这里命名为slotProps，也就是说你传过来的data将会作为slotProps的一个属性，所以需要slotProps.data才能调用到data。前面说了，data的值为todo，todo是什么呢？todo是todos遍历出来的，所以是一个对象。
new Vue({ el:"#app", data:{ name:"岔道口", todos:[ {text:"A",id:1,isTrue:true}, {text:"B",id:2,isTrue:true}, {text:"C",id:3,isTrue:false}, {text:"D",id:4,isTrue:true}, ], // slotProps:"" }})；我们已经理解了slot-scope特性，那么他有什么运用场景呢？我们可以试想一下，别人写好了一个组件，该组件已经封装好了，但他觉得，数据的显示风格让用户自己定义，就像我们上面，我们希望列表的样式由用户定义，比如我就加了一个√号。一开始最初的数据是我们传进去的，但数据必须进过子组件处理后，写组件那个人肯定希望显示的是处理后的数据。这时候slot-scope就无比重要了。