vue入坑之slot（插槽）

slot意思为插槽，水沟；

我们可以把它想象为电脑主板上的插槽，用来插放内存条等对应的部件。

官方文档是这样描述的：

我们将这段话中的“ 内容分发"这四个字作为切入点，比较容易理解，假若我们注册了一个名为aaa的组件：

var vm=new Vue({
    el:'#app',
    components:{
      aaa:{
        template:"<p>这里是默认内容</p>"
      }
    }
})

我们在使用组件的时候在组件的内部使用了DOM，那么我们添加的这些DOM该显示在哪里，怎么显示？

如：

<aaa><span>我自己添加了DOM</span></aaa>

因为我们在注册组件的时候并没有设置<slot>，所以我们添加的DOM内容不会显示

如果我们在注册组件的时候设置了slot，如：

var vm=new Vue({
    el:'#app',
    components:{
      aaa:{
        template:"<p><slot></slot>这里是默认内容</p>"
      }
    }
})

这时候所谓的"内容分发"就会将我们添加的DOM内容分发到卡槽内~

最后出来的效果将会是“我自己添加了DOM这里是默认内容”。

假若我需要指定插入多个DOM呢？这时候我们就需要对我们设置的<slot>进行命名，称为具名slot：

var vm=new Vue({
    el:'#app',
    components:{
      aaa:{
        template:"<p><slot name='first'></slot>这里是默认内容<slot name='second'></slot></p>"
      }
    }
})

我们在使用组件的时候，对添加在组件里面的内容也需要做一个分发指向，指向插入哪个卡槽内：

<aaa>
  <span slot="first">这里是第一个位置
  </span>
  <span slot="second">这里是第二个位置
  </span>
</aaa>

结果将会输出“这里是第一个位置这里是默认内容这里是第二个位置”。