vue的插槽用法，官方文档写的内容个人感觉有点乱，不自己梳理一下的话，使用的时候也容易懵逼，下面是我对vue插槽使用的理解：

1.概念

slot概念源于web components规范草案（地址：https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md）
vue官网关于插槽的文档中，第一句话即说明了vue的slot插槽设计源于web components，具体内容可以自行了解，这里只说vue框架下slot的用法。

概念：slot可将父组件在子组件标签里写的content渲染到子组件对应的地方

2.用法

先说通用性用法，再说特殊情况会让人比较容易接受。这里以最具通用性的写法，以具名插槽的写法为例子展开
父组件中：

<script>
...
</script>

<template> // 注意这个template是组件的template属性，不要跟下面的template标签弄混
  <todo-item>
    <template v-slot:default> // 注意v-slot指令大多数情况都是写在template标签里，有一种特殊情况在下一节会说到，即使不懂特殊情况也不会妨碍到使用。
      这里的内容会渲染到子组件对应的地方
    </template>
  </todo-item>
</template>

<style>
...
</style>

子组件中

<div>
  // 子组件中slot标签的name属性值与父组件中的v-slot绑定的属性值一致，形成对应关系
  <slot name="default"></slot>
</div>

渲染结果:

<div>
  这里的内容会渲染到子组件对应的地方
</div>

父组件template标签上的v-slot指令与子组件的slot标签的name属性，通过绑定一样的值，形成一一对应的关系。
父组件中:

<子组件标签>
  <template v-slot:default>
    我会渲染到name=default的slot中
  </template>

  <template v-slot:test1>
    我会渲染到name=test1的slot中
  </template>

  <template v-slot:test2>
    我会渲染到name=test2的slot中
  </template>
</子组件标签>

子组件中:

<div>
  <slot name="default"></slot> // 我会渲染到name=default的slot中
</div>

<div>
  <slot name="test1"></slot> // 我会渲染到name=test1的slot中
</div>

<div>
  <slot name="test2"></slot> // 我会渲染到name=test2的slot中
</div>

注意，上述例子中，都有v-slot绑定default属性的情况，这里需要说明下，vue中的插槽用法，default属性的模板和插槽存在特殊的对应情况，而比较容易混乱的点就在这里，这也是vue官网插槽文档让人看得很蒙圈的地方，因为官网并没有给我们分区域的讲述通用情况和特殊情况，而是穿插着讲，让人容易理不清楚关系。

3.插槽的默认值

子组件的slot标签中的值可以写入内容，这部分内容会在没有对应的模板内容的时候，作为默认值展示
父组件

<todo-item>
  <template v-slot:test1>
  我是模板1
  </template>
</todo-item>

子组件

<div>
  <slot name="test1">
  我是插槽1
  </slot>
</div>
<div>
  <slot name="test2">
  我是插槽2
  </slot>
</div>

渲染结果

<div>
我是模板1
</div>
<div>
我是插槽2
</div>

4.v-slot指令动态绑定属性

<script>
export default {
  data() {
    return {
      slotName: 'test1'
    }
  }
}
</script>
<template>
  <todo-item>
    <template v-slot:[slotName]>
    </template>
  </todo-item>
</template>
<style>
</style>

具名插槽的写法具备通用性，学会了具名插槽写法，那么插槽的用法已经能够掌握8成了。下面将展开的是插槽中的特殊对应关系

5.default模板和插槽中的特殊对应关系

------------默认的default模板和插槽-----------
父组件

<todo-item>
  我是default的内容
  <template v-slot:test>
    我会渲染到name=test的slot标签中
  </template>
  我也是default的内容
</todo-item>

子组件情形1

<div>
  <slot></slot>
</div>

子组件情形2

<div>
  <slot name="default"></slot>
</div>

渲染结果都是

<div>
  我是default的内容  我也是default的内容
</div>

由于两种情形中都没有name属性是test的插槽，所以渲染结果中没有出现test模板里的内容。

上述例子中涵盖了2个知识点，首先通过子组件情形2能得到渲染结果，可以得出一个结论：

①.父组件中只要是不在template里的内容，无论内容在什么位置（必须在子组件标签里），默认都是default模板的内容，即

<todo-item>
  我是default的内容 // 默认算default模板内容
  <template v-slot:test>
    我会渲染到name=test的slot标签中
  </template>
  我也是default的内容 // 默认算default模板内容
</todo-item>

等价于

<todo-item>
  <template v-slot:default>
    我是default的内容  我也是default的内容
  </template>
  
  <template v-slot:test>
    我会渲染到name=test的slot标签中
  </template>
</todo-item>

default模板的内容必定会渲染到defalut插槽中，所以，通过子组件情形1能得出渲染结果，也可以得出一个结论：

②.子组件中没有指定name属性的slot标签，默认都是default插槽，即

<div>
  <slot></slot>
</div>

等价于

<div>
  <slot name="default"></slot>
</div>

最后还需要注意，模板和插槽的对应关系是1对多的关系。即同名模板只能有一个，但是同名插槽可以有无数个，会同时渲染

以上内容涵盖了9成的插槽用法，足以满足日常使用。下面将要对插槽作用域问题展开讲解

6.模板内容的作用域和插槽内容的作用域

很简单
1.模板内容一般都是在父组件，所以模板内容的作用域自然是父组件的作用域，父组件的动态内容基本上取自父组件的变量或函数，但是有特殊情况可以读取到子组件传出来的值，第3点会讲。

2.同理，插槽一般都是在子组件，所以作用域自然在子组件，比如子组件插槽中放入了动态内容作为默认值，该动态内容必定取值于子组件的变量，也只能读取到子组件的变量和函数

3.特殊情况，父组件可以用子组件传出来的值，这个时候会有写法上的变化：
子组件

<script>
export default {
  data() {
    return {
      content: '我是子组件'，
      show: true
    }
  }
}
</script>
<template>
  <div>
    <slot name="default" :todo-item-content="content" :show="show"></slot> // 通过格式:自定义属性名="变量名"将值传出
  </div>
</template>
<style>
</style>

父组件正常调用

<todo-item>
  <template v-slot:default="props"> //这里的props是我们自己定义的名称，你可以自己起任意名，它是一个对象，包含子组件传过来的所有值
    <div> // 这里需要注意的是，子组件用横杠属性名传过来的值，在调用的时候要用驼峰名调用
        {{props.todoListContent}}
    </div>
    <div> // 不是横杠属性名传过来的值可以直接调用
        {{props.show}}
    </div>
  </template>
</todo-item>

父组件解构对象调用

<todo-item>
  <template v-slot:default="{todoListContent，show}">
    <div>
        {{todoListContent}}
    </div>
    <div>
        {{show}}
    </div>
  </template>
</todo-item>

渲染结果

<div>
  我是子组件
</div>
<div> 
    true
</div>

7.v-slot指令缩写

v-slot指令可以变成缩写的写法，类似v-bind缩写为：，v-on缩写为@，v-slot可以缩写为#
例如

<template v-slot:default>
</template>

<template v-slot:test1>
</template>

<template v-slot:test2>
</template>

等价于

<template #default>
</template>

<template #test1>
</template>

<template #test2>
</template>

8.default模板一种特殊的接受子组件插槽传值的写法(结合第6点的例子)

<todo-item #default="{todoListContent，show}">
  <div>
      {{todoListContent}}
  </div>
  <div>
      {{show}}
  </div>
</todo-item>

这里出现了v-slot指令直接绑定在子组件标签名上的情况，使用场景是，当前模板只有一个default模板，并且需要获取子组件传来的值时，才能这样使用。

不接受传值的情况，会报错

<todo-item #default> // 报错，必须是接受传值的写法，即#default="xxx.."
  <div>
      我是模板
  </div>
</todo-item>

非default模板，也会报错
子组件

<script>
export default {
  data() {
    return {
      content: '我是子组件'，
      show: true
    }
  }
}
</script>
<template>
  <div> // 这里是test插槽
    <slot name="test" :todo-item-content="content" :show="show"></slot> 
  </div>
</template>
<style>
</style>

父组件

// 这里是test模板，是具名模板的写法，会报错，因为这种写法只支持default模板
<todo-item #test="{todoListContent，show}"> 
  <div>
      {{todoListContent}}
  </div>
  <div>
      {{show}}
  </div>
</todo-item>

除了default模板外，还存在其他模板时，也会报错

<todo-item #default="{todoListContent，show}"> // default模板
  <div>
      {{todoListContent}}
  </div>
  <div>
      {{show}}
  </div>
  <template v-slot:test> // test模板  此处将不生效，并且会抛出警告
  </template>
</todo-item>

结语：

以上基本总结了插槽的所有用法，其中第5点和第8点的特殊情况都是针对default模板的，这一点一定要分清楚。

还有1点很关键的知识，即default模板和插槽不算是具名模板和插槽，第8点的非default模板会报错的原因，即该特殊情况不支持具名模板和插槽。但是default模板和插槽在平时写的时候可以用具名模板和插槽的写法，也可以用省略的写法，即第5点描述的情况。