Vue插槽

一、什么是插槽？

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽。提高组件的复用性。

• 插槽基本用法

在父组件中写一个标签，在子组件中放入<slot></slot>插槽命令

如果需要把指定内容渲染到指定插槽中，需要使用v-slot这个指令

v-slot后面需要跟插槽的name

v-slot不可以直接用在元素上，需要放到template标签上

template是一个虚拟的标签，只起到包裹作用，不会被渲染为任何实质性的HTML元素

v-slot可以简写为#

二、具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的 name 名称。这种带有具体 名称的插槽叫做“具名插槽”。示例代码如下

三、作用域插槽

在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做作用域插槽。示例代码如下