谈谈我对vue中slot的理解

66 阅读 0 评论 44 点赞

我是靠谱客的博主傻傻板栗，最近开发中收集的这篇文章主要介绍谈谈我对vue中slot的理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

Vue.component('panel',{
      template: `<div>
                 <div><h1>插槽</h1></div>
                 <div><slot name="header"></slot></div>//具名插槽
                 <div><slot></slot></div>//匿名插槽
                 <div><slot name="footer"></slot></div>//具名插槽
                 </div>`
     })

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

<panel>
        <h1 slot="header">具名插槽1</h1>
        <h1 slot="footer">具名插槽2</h1>
        <h2>匿名插槽</h2>
        <button>匿名插槽</button>
      </panel>

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

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

let list = {
      props: {
       list: {
        default () {
                    return []
        }
       }
      },
       //这里index和item的位置会导致结果的出错
      template: `<ul>
        <li v-for="(item,index) in list" :key="index">
          <slot v-bind:item="item" :index="index"></slot>
        </li>
      </ul>`
     }

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

<list :list="remember">
        <template slot-scope="list">
          <span>{{list.index+1}}--{{list.item.name}}</span>
          <input type="text" v-model="list.item.name">
        </template>
      </list>

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

<body>
    <div id="app">
      <panel>
        <h1 slot="header">具名插槽1</h1>
        <h1 slot="footer">具名插槽2</h1>
        <h2>匿名插槽</h2>
        <button>匿名插槽</button>
      </panel>
      <hr/>
      <list :list="remember">
        <template slot-scope="list">
          <span>{{list.index+1}}--{{list.item.name}}</span>
          <input type="text" v-model="list.item.name">
        </template>
      </list>
    </div>
</body>
<script type="text/javascript">
     Vue.component('panel',{
      template: `<div>
                 <div><h1>插槽</h1></div>
                 <div><slot name="header"></slot></div>
                 <div><slot></slot></div>
                 <div><slot name="footer"></slot></div>
                 </div>`
     })
let list = {
      props: {
       list: {
        default () {
                    return []
        }
       }
      },
       //这里index和item的位置会导致结果的出错
      template: `<ul>
        <li v-for="(item,index) in list" :key="index">
          <slot v-bind:item="item" :index="index"></slot>
        </li>
      </ul>`
     }
     var vm = new Vue({
           el:"#app",
           data () {
            return {
             remember: [
               {
                type: 'mager',
                name: 'xie'
               },
               {
                type: 'stuff',
                name: 'xu'
               },
               {
                type: 'boss',
                name: 'li'
               }
             ]
            }
           },
           components: {list}
      })
    </script>