了解vue的插槽

基础概念

插槽一般是在子组件中设置一个坑，这个坑就是插槽，在父组件中设置内容，将此内容插入到插槽中。

插槽有三种：

1. 单个插槽
2. 具名插槽
3. 作用域插槽

单个插槽

就是子组件中设置了一个单一的插槽。

<!-- Child.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <div>
    <Child>
      <span>我是一个单一插槽</span>
    </Child>
  </div>
</template>

具名插槽

上面是比较单一的，每个插槽的内容都是一样的，如果我们想要给不同的插槽都设置不同的内容，那么，我们就可以给插槽定义一个名字：name=”xxx”，然后在父组件中使用 template 包裹内容，并添加 v-slot:xxx 属性来将内容指定给相应的插槽。

<!-- Child.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- App.vue -->
<template>
  <div>
    <Child>
      <template v-slot:header>
        <span>我是头部</span>
      </template>
      <!-- <template v-slot:default> -->
      <template>
        <span>我是主体</span>
      </template>
      <template v-slot:footer>
        <span>我是尾部</span>
      </template>
    </Child>
  </div>
</template>

现在