谈谈我对vue中slot的理解

slot的英文本意是 位置；狭槽；水沟；硬币投币口这些翻译中，我个人认为“硬币投币口”比较适合理解。
首先我们假设，slot的三种类型，分别对应着
匿名插槽 ——— 一毛硬币投币口
具名插槽 ——— 五毛硬币投币口
作用域插槽 ——— 有出口的投币口
设置的条件是前面两个存钱罐是没有出口的，也就是只能放进去而不能拿出来，这里模拟他们不能进行数据的交互，而最后一个则是有出口的，他能拿出里面的东西给外面的用。
ok,我们接下来慢慢探讨。
因为前面两者有着语义上的相反，我们直接来对比学习。

Vue.component('panel',{
      template: `

                 
插槽
                 
//具名插槽
                 
//匿名插槽
                 
//具名插槽
                 
`
     })

直接用最暴力的方式建立插槽，是不是一目了然就看出了区别，有名字和没名字。我们把一毛的硬币全部放到匿名插槽中，五毛的硬币，现在由于有两个兄弟，所以必须分好家产，这些硬币和家产就是dom节点，最后dom节点会有序的分发到相应的位置。
这里有一点让人困惑的地方，就是最后的排版到底是怎么样的？

        
具名插槽1
        
具名插槽2
        
匿名插槽
        匿名插槽
      

像上面这样乱成一团的dom节点，最后渲染出来是什么样的顺序？
下面直接给出图片，没错，就是把这些杂乱的dom节点，按照给定的规则分发到指定的插槽中，跟你怎么写这些插槽顺序没有关系，关键是你模板里面的布局，这才会影响最后渲染的结果。

最后就是作用域插槽了，没有就是那个能取钱的存钱罐，就是它，行走的ATM。

let list = {
      props: {
       list: {
        default () {
                    return []
        }
       }
      },
       //这里index和item的位置会导致结果的出错
      template: `

        

          
        
      
`
     }

这里直接定义一个list的局部组件，slot里面居然做了数据绑定，没错这里就是能取出来的钱了。怎么取？

通过slot-scpe来取，这是template里面的dom节点都可以收到这笔钱，并且可以自由使用。说白了，有点像数据暴露一样，实现了组件数据的交互，而不是占着茅坑不拉屎。
最后给出全部的代码

    

      
        
具名插槽1
        
具名插槽2
        
匿名插槽
        匿名插槽