Vue组件之slot插槽
vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。
匿名插槽
父组件使用子组件时，在子组件标签内部编写内容，子组件内部可以使用
<!-- SlotTest.vue -->
<template>
<div>
下面是solt接收到的值：
<slot>default data</slot>
</div>
</template>
在父组件中直接使用子组件，没有传入数据
<template>
<div>
<slot-test>
<!-- data from father -->
</slot-test>
</div>
</template>
可以看到渲染子组件的时候使用了默认值
然后将子组件中加入数据，子组件中渲染了父组件中传入的数据
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
意思是：通过
这种方式传递的参数（data=”slot data”），只能在子组件中访问到（通过props接收），父组件中是访问不到的
具名插槽
当组件中需要多个插槽时，使用匿名插槽会非常不方便
v-slot:name，配对的内容放置到相应的插槽内部，其余内容放置到默认插槽中
<!-- father -->
<template>
<div>
<slot-test>
这里
<template v-slot:first>
第一个插槽
</template>
<template v-slot:second>
第二个插槽
</template>
其余内容全部放到默认插槽
</slot-test>
</div>
</template>
<!-- son -->
<template>
<div>
下面是solt接收到的值：
1. <slot name="first">default data</slot>
2. <slot name="second">default data</slot>
3. <slot>default data</slot>
</div>
</template>
来看一下眼效果，很清晰明了。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容，相当于
作用域插槽
当我们想在父组件中访问子组件内部的一些数据时，就需要在子组件内部的
代码示例
<!-- 子组件 -->
<template>
<div>
<slot name="user" v-bind:user="user">
</slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '张三',
age: 15
}
}
},
}
</script>
<!-- 父组件 -->
<template>
<div>
<slot-test>
<template v-slot:user="slotProps">
{{slotProps.user.name}}今年{{slotProps.user.age}}岁。
</template>
</slot-test>
</div>
</template>
当独占默认插槽时可以简写为（不可以和具名插槽混用）
<slot-test v-slot="slotProps">
{{slotProps.user.name}}今年{{slotProps.user.age}}岁。
</slot-test>
更多用法
