Vue插槽

发布于 2022-03-07  735 次阅读


一、什么是插槽?

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

  • 插槽基本用法

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

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

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

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

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

v-slot可以简写为#

二、具名插槽

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

三、作用域插槽

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


小小孩子们