鉴于还是有不少的同学搜到这篇文章，而这篇文章又是笔者早期写的，现在回过头来看发现有太多的不足，为避免误人子弟，重新撰写了一篇Vue slot 详解 ，有需要的同学可以去浏览一下。
百度上已经有很多的关于slot-scope的文章，但我感觉都是那些以前没学好，又回头学的人，他们都使用了.Vue文件，我觉得有点不适合初学者，所以我就写一篇适合初学者的。
先抛例程：
组件之通过插槽(slot)分发内容
Something bad happened.你是谁啊，我认识你吗
Something bad happened.
标题{
{name}}
劝学
少壮不努力，老大徒伤悲
光阴似箭，日月如梭
- 主页
- 关于时间
- 关于人生
- 关于未来
你好啊
结尾
粤ICP备15
√ {
{slotProps.data.text}}
√ {
{data.text}}
例程中也写了普通插槽和具名插槽，这个我就不说，我就说一下作用域插槽。首先从“作用域插槽“”这个名字说起，本来你父组件的模板是无法使用到子组件模板中的数据，官网中有一句特别强调的话：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。这句话其实挺难理解，举个例子就知道了，
Something bad happened.
标题{
{name}}
这是我上面的例子，也就是说这里name必须是当前组件里的，不能是test-slot这个组件内部的数据，这是它作用域限制，name这个数据属于父组件的作用域，所以只能是父组件的数据。但是slot-scope的出现却实现了父组件调用子组件内部的数据，子组件的数据通过slot-scope属性传递到了父组件
// 作用域插槽 Vue.component("todo-list",{ inheritAttrs:false, props:{ todos:[Array,Object] }, template: `
- //这里的：data=“todo”就是讲子组件todo这个数据传给了父组件
{
{todo.text}}
//todo.text是默认值，父组件会把它覆盖掉
` });
√ {
{slotProps.data.text}}
使用的时候就是这样，从子组件传过来的名为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就无比重要了。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/201075.html原文链接：https://javaforall.net
