浅谈Vue中的作用域插槽

说到作用域插槽，其实算是Vue中的一个难点和痛点吧。感觉这个概念并不是很好理解。昨天听课加上敲代码，外加今天的理解和咨询。这才算是将这篇总结形成。以一种比较容易懂的方式来进行阐述。

 作用域插槽，个人理解是一个把能替换的部分单独提取出来，作为一个公用部分。比如我这里有一个盒子，我里面还有个积木或者盒子或者其它一些乱七八糟的玩意儿。反正外表上看他就是个盒子。里面你不知道它装的到底是啥。这部分把它抽取出来，作为一个公用部分，拿出来当做一个盒子。然后在子组件的模板里面，定义一个插槽，这个插槽是可以替换格式，可以通过外部传值的方式到里面的模式，进来然后进行渲染的。这么说可能不是很明朗，下面举几个例子来进行说明。

单个List进行遍历的情况

 先交代一下背景，在主Vue对象中，我注册了一个组件叫做item，然后这个是一个局部组件。（这里代码先省略下，后面贴我要举例子的全部代码，分开去说可能脉络更清晰一些。）在这个item中，我添加了一个template标签，然后这个时候我们的插槽就要出现了。作用域给谁，谁就当做一个对象传给我模板下面的slot，然后展示内容的时候，可以直接用这个值来进行对组件插槽的访问。

html部分：

    <div id="app">
        <item>
            <template slot-scope="item">
                {{item.aaa}}
            </template>
        </item>
    </div>

就比如说是这个样子。在这里我定义了一个slot-scope叫做item，这里面item.aaa可能你们不是很理解。是因为我还没有贴下面的代码，我对组件以及模板的定义。

 js部分：

    var child={
        template:"<div ><slot  v-for='child in childList' :aaa='child'></slot></div>",
        data:function(){
            return{
                childList:[1,2,3,4,5]
            }
        },
    }
    var vm=new Vue({
        el:"#app",
        components:{
            item:child,
        }
    })

这个怎么去理解呢？结合这两段代码来详细进行说明，在这里我定义了一个匿名插槽，然后循环将这里面的内容输出出来。后面的那个绑定对象，其实在我这个slot中并没有这个属性，这个属性是可以自定义的，也就是我们前面提到的aaa。然后这个aaa所指向的内容，指向的是我们的数据。然而我v-for里面是循环将我这个childList的内容进行插入，那么这个child就可以作为我们指向的对象，那么就有了：aaa='child’，我们虚拟自定义的这个aaa属性，是可以被外部进行访问的。外部传值，可以利用slot-scope中定义的item，通过这个aaa来取到我们的child对象，当然在这里面是数值。那么也就是{{item.aaa}}。

 那么假如我这里面不是数，而是一个个对象呢？其实我最开始玩的例子就是直接玩的对象。因为就是想搞懂这玩意的工作原理。所以下面结合代码进行说明，其实道理是一模一样的。

对象数组List遍历的情况

html部分：

    <div id="app">
        <item>
            <template slot-scope="item">
                 {{item.aaa.name}}----{{item.aaa.age}}<br>
                <!-- {{item.aaa}} -->
            </template>
        </item>
    </div>

js部分：

    var child={
        template:"<div ><slot  v-for='child in childList' :aaa='child'></slot></div>",
        data:function(){
            return{
                childList:[{name:"Wang",age:18},{name:"Lee",age:23}]
                //childList:[1,2,3,4,5]
            }
        },
    }
    var vm=new Vue({
        el:"#app",
        components:{
            item:child,
        }
    })

还是老样子，这里我在childList里面定义了两个人，Wang和Lee，年龄分别为18和25。我现在要把他们的信息打印出来。在这里，我的作用域插槽的名称是item，根据我们上面的说明，它可以理解为一个对象，它有一个属性叫做aaa，我们可以通过aaa，来访问插槽里面我们的数据，而这个具体的数据跟的是什么，那么要看我后面的aaa绑定的是什么。在这里我还是绑定一个child。v-for会遍历整个childList的数据，那么我们要在父组件中输出它的信息，该怎么处理呢？通过aaa来获取child的对象，然后child里面包含了name和age，分别去访问它们，就可以将信息打印。

结合上述的说明，我们的写法就是{{item.aaa.name}}和{{item.aaa.age}}了。事实证明，我们的信息输出也确实是成功的。

这里的理解确实是比较麻烦，所以mark一下，希望大家给予指导性意见，也希望自己假如忘记咋回事的时候能看看，就明白了。