一句话描述4个关键词的作用：
template是备胎(模板)：通常在html里面作为备用模板，包裹的内容显示，而自身标签不会出现在html中
slot是替身(替代组件包裹内容、插槽)：通常出现在子组件中，用于替代父组件中><尖括号包裹的内容。
slot-scope是渣女的闺蜜(经常传话)：闺蜜说的话到处去散播，用于获取子组件的对应变量值。
v-slot具有slot和slot-scope的功能：
- 当写法是v-slot:插槽别名等同于slot="插槽别名"的写法
- 当写法是v-slot="变量名"等同于slot-scope="变量名"的写法
美中不足，v-slot 只能用在组件或 <template> 标签上，所以某种意义我更喜欢用slot和slot-scope。
接下来就用一个综合的例子讲解这4者分别的用处：
template
<template>
之间的内容直接显示出来，不会带出template节点标签
</template>
slot
【单个插槽的情况】
在子组件里面用<slot></slot>就可以显示父组件中><尖括号包裹的内容。
________________________________________________________________________
【多个插槽就需要用到具名的slot插槽】
父组件里面：
<template slot="插槽别名1">内容1</template>
<template slot="插槽别名2">内容2</template>
写法等同于
<template v-slot:插槽别名1>内容1</template>
<template v-slot:插槽别名2>内容2</template>
子组件里面：
<slot name="插槽别名1"></slot> //这个位置就会显示“内容1”
<slot name="插槽别名2"></slot> //这个位置就会显示“内容2”
提示：上面的name="插槽别名1"换成v-slot:插槽别名1也是可以的
slot-scope
子组件里面：
<slot
:传参1="{字段1:'内容1',字段2:'内容2'}"
:传参2="{字段1:'内容2-1',字段2:'内容2-2'}"
></slot>
父组件里面：
<template slot-scope="{ 传参1,传参2}">
{ { 传参1.字段1}}//这个位置就会显示“内容1”
{ { 传参1.字段2}}//这个位置就会显示“内容2”
{ { 传参2.字段1}}//这个位置就会显示“内容2-1”
{ { 传参2.字段2}}//这个位置就会显示“内容2-2”
</template>
写法等同于
<template v-slot="{ 传参1,传参2}">
{ { 传参1.字段1}}//这个位置就会显示“内容1”
{ { 传参1.字段2}}//这个位置就会显示“内容2”
{ { 传参2.字段1}}//这个位置就会显示“内容2-1”
{ { 传参2.字段2}}//这个位置就会显示“内容2-2”
</template>
v-slot
上面已经讲过了v-slot等同于slot和slot-scope的功能。
最巧妙之处，v-slot可以同时使用这两种功能，写法如下：
子组件里面：
<slot name="插槽别名1"
:传参1="{字段1:'内容1',字段2:'内容2'}"
:传参2="{字段1:'内容2-1',字段2:'内容2-2'}"
></slot>
父组件里面：
<template v-slot:插槽别名1="{ 传参1,传参2}">
{ { 传参1.字段1}}//这个位置就会显示“内容1”
{ { 传参1.字段2}}//这个位置就会显示“内容2”
{ { 传参2.字段1}}//这个位置就会显示“内容2-1”
{ { 传参2.字段2}}//这个位置就会显示“内容2-2”
<template>
其实，Angular也有类似的几个变态标签、属性，有空可以了解下：