当前位置：首页 > news >正文

Vue.js前端框架教程9：Vue插槽slot用法

news 2025/7/10 3:47:48

文章目录

- - - 插槽（Slots）
    - - 无名插槽（默认插槽）
      - 具名插槽
      - `reference` 插槽
      - 使用 `v-slot` 的缩写语法

插槽（Slots）

在 Vue 中，插槽（Slots）是一种组件内容分发的机制，允许你将内容从父组件传递到子组件的模板中。插槽可以有名字，这样你就可以在子组件中定义多个插槽，并且在父组件中指定哪些内容应该放入哪个插槽。

以下是一些常见的插槽用法，包括 header、footer 和 reference 插槽：

无名插槽（默认插槽）

无名插槽是最简单的插槽类型，如果没有指定插槽的名字，那么它就是默认插槽。

子组件：

<template><div><slot></slot> <!-- 默认插槽内容将在这里渲染 --></div>
</template>

父组件：

<template><ChildComponent><p>这是一些默认插槽内容。</p></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';
</script>

具名插槽

具名插槽允许你在一个组件中有多个内容插入点。

子组件：

<template><div><slot name="header"></slot> <!-- header 插槽内容将在这里渲染 --><slot name="default"></slot> <!-- 默认插槽内容将在这里渲染 --><slot name="footer"></slot> <!-- footer 插槽内容将在这里渲染 --></div>
</template>

父组件：

<template><ChildComponent><template v-slot:header><h1>这是头部内容</h1></template><p>这是默认插槽内容。</p><template v-slot:footer><p>这是底部内容</p></template></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';
</script>

`reference` 插槽

reference 插槽通常用于定义一个触发元素，例如在弹出组件中。

子组件：

<template><div><slot name="reference"></slot> <!-- 触发元素将在这里渲染 --><div>弹出内容...</div></div>
</template>

父组件：

<template><ChildComponent><template v-slot:reference><button>点击我</button></template></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';
</script>

在这个例子中，<button> 元素是触发弹出的参考元素，当用户点击按钮时，子组件会显示弹出内容。

使用 `v-slot` 的缩写语法

在 Vue 2.6.0+ 和 Vue 3 中，你可以使用 v-slot 的缩写语法 #：

父组件（使用缩写语法）：

<template><ChildComponent><template #header><h1>这是头部内容</h1></template><p>这是默认插槽内容。</p><template #footer><p>这是底部内容</p></template></ChildComponent>
</template>