插槽

139 阅读1分钟

插槽的定义

插槽(Slot)是 vue 为组件的封装者提供的功能,允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间,为用户预留的内容的占位符,在组件的使用者使用该组件时可以为插槽指定填充的内容。

插槽的分类

  • 默认插槽

    在封装组件时,可以通过<slot>元素定义插槽,从而为用户预留内容占位符,如果在封装组件时没有预留任何 <slot> 插槽,则用户提供的任何自定义内容都会被丢弃。即用户提供的页面元素没有位置放入

image.png

image.png

  • 具名插槽

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

image.png

image.png

在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式指定元素需要放在哪个插槽中。

注意:没有指定 name 名称的插槽,会有隐含的名称叫做 “default”

具名插槽的简写形式

image.png

  • 作用域插槽

在封装组件的过程中,可以为预留的<slot> 插槽绑定 props 数据,这种带有 props 数据的<slot> 叫做“作用域插槽”。

作用域插槽,要显示的数据已经在组件中,以什么样的样式显示数据(用什么标签和标签的样式),可以由组件的使用者进行指定。

image.png

image.png

image.png

image.png