slot卡槽

solt卡槽官方定义：Vue 实现了一套内容分发的 API，将 slot 元素作为承载分发内容的出口
个人理解：在子组件里使用slot占坑，父组件里定义填坑的内容。这样填坑后就会形成子组件最终的dom结构。

Vue.component("child",{
   template:`
     <div>
       child  
       <slot name="a"></slot>
       <slot name="b"></slot>
     </div>
   `
 })

<!-- 当前组件或者节点 在哪个模板中，就能访问哪个模板状态 -->
<child>
<!-- 这里添加了slot，就不可以添加样式，即使添加样式也无效 -->
  <div slot="b">1111111111111111111111111111111</div>
  <div slot="a">2222222222222222222222222222222</div>
</child>

dom解析之后子组件内容就变成

<div>
  child  
  <div>1111111111111111111111111111111</div>
  <div>2222222222222222222222222222222</div>
</div>

匿名卡槽

匿名插槽就是没有使用slot占坑，没有添加name属性。一个组件中只能有一个该类插槽。

Vue.component("navbar",{
   template:`
     <div>
       <slot></slot>
       navbar-导航栏
       <button>click</button>
     </div>
   `
 })

匿名卡槽填坑的时候，只会选择没有slot属性的元素进行填坑

<navbar>
  <button @click="isShow=!isShow">click</button> <!-- 会加载-->
  <div slot="a">2222222222222222222222222222222</div> <!-- 不会加载-->
</navbar>

具名卡槽

具有名字的插槽，名字通过属性name来定义。一个组件中可以有很多具名插槽，出现在不同的位置

Vue.component("navbar",{
  template:`
    <div>
      <slot name="left"></slot>
      <span>title</span>
      <slot name="right"></slot>
    </div>
  `
})

<navbar>
 <template #left>
 <!-- 也可以写成 <templete solt=“left”> -->
    <i class="iconfont aaa"></i>
    <button >aaaa</button>
  </template>
  
  <template #right>
    <button >bbbb</button>
  </template>
</navbar>

dom解析之后子组件内容就变成

<div>
  <i class="iconfont aaa"></i>
  <button >aaaa</button>
  <span>title</span>
  <button >bbbb</button>
</div>