vue中的插槽--slot和v-slot

今天团队内部有一个技术分享会，主要是vue进阶这一块，我对插槽slot的认识还不清晰，于是就总结一下
什么是插槽？
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

从 [email protected] 开始，Vue 为具名和范围插槽引入了一个全新的语法，即我们今天要讲的主角：v-slot 指令。目的就是想统一 slot 和 slot-scope 语法，使代码更加规范和清晰。既然有新的语法上位，很明显，slot 和 scope-slot 也将会在 [email protected] 中彻底的跟我们说拜拜了。而从 [email protected] 开始，官方推荐我们使用 v-slot 来替代后两者。

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

下面我们将用之前的slot的默认插槽，具名插槽，作用域插槽 和最新的v-slot做对比记忆

怎么用插槽？

1.默认插槽

1.1 老的写法

子组件(slotOne1)

 <template>
      <div class="slotOne1">
        <div>我是slotOne1组件</div>
        <slot></slot>
      </div>
    </template>

在子组件中写入slot，slot所在的位置就是父组件要显示的内容

父组件

 <template>
      <div>
        我是父组件
        <slotOne1>
          <p style="color:red">我是父组件插槽内容</p>
        </slotOne1>
      </div>
    </template>

在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用）

1.2 用v-slot实现(新的方法)

子组件(slotOne1)

 <template>
      <div class="slotOne1">
        <div>我是slotOne1组件</div>
        <slot></slot>
      </div>
    </template>

在子组件中写入slot，slot所在的位置就是父组件要显示的内容

父组件

 <template>
      <div>
        我是父组件
        // 当然也可以不写v-slot:default  直接
        <slotOne1 v-slot:default>
          <p style="color:red">我是父组件插槽内容</p>
        </slotOne1>
      </div>
    </template>

Tips: 没有名字的 隐含有一个 “default” 名称
任何没有被包裹在带有 v-slot 的 组件标签 中的内容都会被视为默认插槽的内容。
在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用）

当然在父组件引用的子组件中也可以写入其他组件 例如：

子组件(slotOne1)

<template>
   <div class="slotOne1">
      <div>我是slotOne1组件</div>
      <slot></slot>
   </div>
</template>

子组件(slotOne2)