vue中的插槽slot用法（个人总结）

在我们使用vue组件的时候，通常需要向组件传递内容，向这样

<alert-box>
  这是一个插槽
</alert-box>

这时候我们就需要用到slot元素。官方文档对于插槽的介绍并不容易理解，对于初学者来说并不算友好。总的来说，slot插槽大致分为三类。

1. 插槽基本使用（匿名插槽）

父组件向子组件传递内容

<div id="app">
   <alert-box>有bug发生</alert-box>
   <alert-box>有一个警告</alert-box>
   <alert-box></alert-box>
 </div>
Vue.component('alert-box', {
   
      template: `
        <div>
          <strong>ERROR:</strong>
          <slot>默认内容</slot>
        </div>
      `
    })

分别显示为
ERROR: 有bug发生
ERROR: 有一个警告
ERROR: 默认内容

2. 具名插槽的用法
   有时候，我们需要有多个插槽，显示不同的格式

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer></