vue 插槽（slot）v-slot 使用

插槽是什么？

官方解释 插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。
通俗解释 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

基本用法

现在，有两个组件，A与B，分别如下：
A.vue

<template>
  <div>
    <p>我是A组件</p>
  </div>
</template>
 
<script>
export default {
  name:'A',
  data(){
    return {
 
    }
  }
}
</script>

B.vue

<template>
  <div>
    <p>我是B组件</p>
  </div>
</template>
 
<script>
export default {
  name:'B',
  data(){
    return {
 
    }
  }
}
</script>

将B组件引入A组件里面（此时B为A的子组件）

<template>
  <div>
    <p>我是A组件</p>
    <B><B/>
  </div>
</template>
 
<script>
import B from './B.vue'    //引入B组件
export default {
  name:'A',
  components:{      //注册B组件
    B
  },
  data(){
    return {
 
    }
  }
}
</script>

在B组件里面使用插槽（slot）

<template>
  <div>
    <p>我是B组件</p>
    <slot></slot>     //插槽的使用方式
  </div>
</template>
 
<script>
export default {
  name:'B',
  data(){
    return {
 
    }
  }
}
</script>

修改A组件里面的代码

<template>
  <div>
    <p>我是A组件</p>
    <B>  
      验证插槽是否生效      //用B组件标签包裹内容，验证slot
    </B>
  </div>
</template>
 
<script>
import B from './B.vue'
export default {
  name:'A',
  components:{
    B
  },
  data(){
    return {
 
    }
  }
}
</script>

此时B组件里面就有A组件定义的内容，这就是插槽的基本使用

插槽版本变化

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。
有时我们需要多个插槽。例如对于一个带有如下模板的 组件：

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

在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

注意 v-slot 只能添加在 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

记录一下简单的语法，详解还是得看官方api官方链接