VUE 插槽

基本的插槽解决了在组件标签中写内容无法被渲染的问题（如果我们想要像普通标签一样在标签中写内容会渲染出来）

基本插槽的写法

child.vue

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

我们要给组件的使用者一个权限，可以自定义内容的权限，可以使用slot，slot放在哪，未来组件标签中的内容就会被渲染到哪 parent.vue

<template> <div> <child>内容</child> </div> </template>

具名插槽

当我们有多个插槽时，如果不设置name属性，则都属于默认插槽，那么标签中的内容就会渲染到每一个默认slot，想要解决这个问题，可以添加name属性 child.vue

<template> <div> <slot name="slot1"></slot> <slot name="slot2"></slot> <slot name="slot3"></slot> </div> </template>

parent在使用时，可以使用v-slot:name的写法，也可以使用老的写法slot=“name”

parent.vue

<template> <div> <child> <!-- 新的写法 --> <template v-slot:slot1>slot1的内容</template> <template v-slot:slot2>slot2的内容</template> <template #slot3>slot3的内容</template> <!-- 老的写法(已废弃但未移除) --> <template slot="slot1">slot1的内容</template> </child> </div> </template>

当我们的插入的名字和插槽名字一致时，则这个内容会被渲染到对应的插槽中

作用域插槽

作用域插槽本质就是，在封装组件时，可以给slot标签上添加一些属性，则在使用该组件时，在对应的要插入的slot里可以获取到对应的属性

child.vue

<template> <div> <slot 属性="属性值" 属性2="属性值"></slot> </div> </template>

parent.vue

<template> <div> <child> <!-- 新的写法 （解构赋值）--> <template v-slot="自定义的对象名">内容</template> <template v-slot="{属性, 属性2}">内容</template> <!-- 老的写法(已废弃但未移除) --> <template slot-scope="自定义的对象名">内容</template> <template slot-scope="{属性, 属性2}">内容</template> </child> </div> </template>