slot-scope怎么在Vue中使用
slot-scope怎么在Vue中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件之通过插槽(slot)分发内容</title> <script class="lazy" data-src="你的vue地址，请下载最新版的"></script> <script> Vue.component("test-slot",{ // 插槽允许有默认内容 template: `<div> <strong>Error!</strong> <slot></slot> </div> `, data:function () { return { name:"perry" } } }); // 具名插槽 Vue.component("slot-name",{ template: `<div> <header> <slot name="header"></slot> </header> <main> <slot ></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> ` }); // 作用域插槽 Vue.component("todo-list",{ inheritAttrs:false, props:{ todos:[Array,Object] }, template: `<ul> <li v-for="todo in todos" :key="todo.id" > <slot :data="todo">{{todo.text}}</slot> </li> </ul> ` }); </script> <style> li{ list-style: none; display: inline-block; font-size: 25px; } </style></head><body> <div id="app"> <!--1、插槽内容 slot可以接收任何内容、代码，包括组件--> <test-slot>Something bad happened.你是谁啊，我认识你吗</test-slot> <test-slot> Something bad happened. <!--允许使用变量，但该变量必须是本作用域的才会生效，这里name的值将会是"岔道口"--> <h4>标题{{name}}</h4> <img class="lazy" data-src="img/flower.jfif" alt="图片无法显示"> </test-slot> <!--2、具名插槽 slo有一个特殊的属性name,可以使插槽具名--> <slot-name> <h4>劝学</h4> <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的值将会是"岔道口"--> <h4>标题{{name}}</h4> <img class="lazy" data-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" > //这里的：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怎么在Vue中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
