Vue插槽是什么？

插槽

Vue的组件是高级的自定义标签，我们可以像这样去使用一个叫myCom的组件，而组件中的内部并不像html标签那样写在标签内，而是写在myCom组件内的complate模板中，如果我们在中写内容的话是不会显示到页面这种的，如果我们非要在自定义便签中添加内容，比如说Hello,我想让hello在组件中显示出来，那么我们就要用到插槽。

	<my-com>Hello</my-com>
    <my-com>World</my-com>

如何使用插槽？
我们在子组件的模板内添加slot,内部放默认内容，相当于申请了一块位置

template: `
        <div>
          <button>
            <slot :a="subMsg" name="default">默认内容{{subMsg}}</slot>
          </button>
          <div>
            <slot :sub="subMsg"  name="slot2" :test="1">默认内容2</slot>
          </div>
        </div>
      `

有了位置以后，组件标签内的内容就可以填充到默认位置当中
如果不想默认的排放数据，我们可以自定义模板将内容放到插槽中

<template #default>
        <div>
          123
        </div>
      </template>

如果没写属性，则默认属性为v-slot=default表示默认，这就是默认插槽
如果写了属性指定slot名字，则为具名插槽，该内容也会放到指定的插槽中
==========================================================
没有名字的插槽 --默认插槽

	<slot>123</slot>
    <slot name="default">123</slot>

具有名字插槽 --具名插槽

<slot name="test">123</slot>

如果自定义模板没有指定插槽，那么他会默认放到插槽中，
如果指定了插槽，正则将会放到对应的插槽中

指定插槽

    <my-com>
      <template v-slot:default>
        hello
      </template>
      <template v-slot:test>
        123
      </template>
      <template #test>
        123
      </template>
    </my-com>

总结

插槽能让我们在组件标签内填充内容，相当于组件是一个电影院，电影院内有可以放很多椅子（插槽），来看电影的人（自定义模板）找位置坐下，如果是默认的自定义模板，则按默认规则入座，如果是指定了插槽的，则按对应的插槽入座。