vue2 中插槽的详细使用（包含新旧版本）
因为想更详细的去了解插槽的使用，于是就去网上查找了各种资料看来看去还是存在着疑惑，在写具名插槽的时候为啥有些地方写v- slot、或者slot或者#代替呢，等等一系列问题。于是研究了一下，终于是搞明了。插槽（slot）是一种用于在父组件中向子组件传递内容的方式。插槽允许我们在子组件的特定位置插入父组件中的内容，以实现更灵活的组件复用，这是一种很好的封装组件方式。
插槽在父组件引用的写法在2.6.0本版之后发生了变化，因此会产生2种不同的写法
插槽一共分为3种方式：
1.匿名插槽
2.具名插槽
3.作用域插槽
一、匿名插槽
在父组件中引用子组件的时候，子组件中写的内容，会全部一起传到这个子组件页面<slot></slot> 所在的位置。父组件中可以多次引用这个子组件，则引用几次就会渲染几次。
示例：
子组件中写法
<template>
<div>
<h1>这是子组件：测试匿名插槽</h1>
<slot></slot>
</div>
</template>
父组件中(写法不变)
<template>
<son>
匿名插槽内容
</son>
</template>
<script>
import son from "./son.vue"
export default {
components:{son},
}
结果展示：
二、具名插槽
当子组件中需要使用多个的时候，为了区别把当前内容放到什么位置，就需要使用具名插槽。意思就是给插槽指定名称，然后 一 一对应。
示例：
子组件中写法：
<template>
<div>
//name属性表示该插槽所定义的名字
<slot name="name1"></slot>
<slot name="name2"></slot>
</div>
</template>
父组件中写法：（2.6.0版本之后）
<template>
<div class="son">
<h1>这是具名插槽</h1>
//写法一
//name1和name2是对应子组件slot中定义的name值
<son v-slot:name1>
具名插槽内容1
</son>
//写法二（简写）
<son #name2>
具名插槽内容2
</son>
</div>
</template>
<script>
import son from "./son.vue"
export default {
components:{son},
}
</script>
父组件中写法：（2.6.0版本之前）
<template>
<div class="son">
<h1>这是具名插槽</h1>
//name1是对应子组件slot中定义的name值
<son slot="name1">
具名插槽内容
</son>
</div>
</template>
<script>
import son from "./son.vue"
export default {
components:{son},
}
</script>
结果展示：
三、作用域插槽
主要是为了在父组件中访问子组件中的数据而提出来的一种方案。需要在子组件中定义时传递数据，然后提供给父组件引用时使用。
示例：
子组件写法
<template>
<div>
//name表示该插槽的名字，data表示传递的数据，可以取任何名
<slot name="zyyName" :data="data1"></slot>
<slot name="zyyName2" :data="data2"></slot>
</div>
</template>
<script>
export default {
data(){
return {
data1:{name:'年龄',age:'18'},
data2:{name:'年龄',age:'19'}
}
}
}
父组件写法（2.6.0版本之后）
<template>
<div class="son">
<h1>这是作用域插槽</h1>
//写法一
//zyyName对应子组件slot名字，{data}是结构的写法，data是对应子组件传递的数据。
<son v-slot:zyyName="{ data }">
作用域内容 {{data.name}}:{{data.age}}
</son>
//写法二（简写）
<son #zyyName2="{ data }">
作用域内容2 {{data.name}}:{{data.age}}
</son>
</div>
</template>
<script>
import son from "./son.vue"
export default {
components:{son},
}
</script>
父组件中写法（2.6.0版本之前,在vue3中这种写法已不支持）
<template>
<div class="son">
<h1>这是作用域插槽</h1>
//zyyName对应子组件slot名字，{data}是结构的写法，slot-scope中的data是对应子组件传递的数据。
<son slot="zyyName" slot-scope="{data}">
作用域内容 {{data.name}}:{{data.age}}
</son>
</div>
</template>
<script>
import son from "./son.vue"
export default {
components:{son},
}
</script>
结果展示：
注意：在使用作用域插槽时，当子组件需要传递多个数据时，也可以不使用结构的写法，写法如下。
示例：
子组件中写法
<template>
<div>
//name表示该插槽的名字，data表示传递的数据，可以取任何名
<slot name="zyyName" :data1="data1" :data2=”data2“></slot>
</div>
</template>
<script>
export default {
data(){
return {
data1:{name:'年龄',age:'18'},
data2:{name:'年龄',age:'19'}
}
}
}
父组件（2.6.0版本之后）
<template>
<div class="son">
<h1>这是作用域插槽</h1>
<son #zyyName2="allData">
<p>作用域内容1 {{allData.data1.name}}:{{allData.data1.age}}</p>
<p>作用域内容2 {{allData.data2.name}}:{{allData.data2.age}}</p>
</son>
</div>
</template>
<script>
import son from "./son.vue"
export default {
components:{son},
}
</script>
结果展示：
