Vue的插槽（slot）有哪些常见的使用方式？

插槽在vue组件通信中主要有三种类型默认插槽用于单一内容插入具名插槽用于多个区域自定义作用域插槽让父组件基于子组件数据渲染内容。1.默认插槽是最基础的方式适合只需要插入一段内容的情况可在slot标签内添加默认内容以备父组件未传入时显示；2.具名插槽通过name属性区分多个插槽适合结构清晰需要多处定制的组件如布局或表单组件父组件通过template配合#符号指定对应名称插槽；3.作用域插槽可将子组件数据暴露给父组件常用于封装可复用列表或表格组件子组件通过绑定属性传递数据父组件使用解构方式获取并渲染内容。

插槽（slot）是 Vue 组件通信中非常实用的一个特性，它允许我们向子组件传递内容，包括 HTML、组件甚至函数。常见的使用方式其实不多，但用好了能大大提升组件的灵活性。

默认插槽：最基础也是最常用的

默认插槽就是你在写组件时最常遇到的那种，比如这样：

<my-component>
  <p>这是一段插入的内容</p>
</my-component>

在 my-component 内部只需要写一个 <slot />，这段内容就会被“注入”进去。这种方式适合只需要插入一段内容的情况，不需要命名，直接丢进去就行。

立即学习“前端免费学习笔记（深入）”；

不过需要注意的一点是：如果父组件没有传内容进来，那这个 slot 的位置就是空的。你可以加个默认内容，像这样：

<slot>
  <p>默认内容</p>
</slot>

这样当父组件没传内容时，就会显示默认的那一段。

具名插槽：给插槽起个名字更好管理

当组件需要多个插槽的时候，默认插槽就不够用了。这时候就需要用到具名插槽（named slot）。

比如你写了一个卡片组件，想让标题、内容、底部按钮分别由父组件控制，这时候就可以这样定义：

<!-- 子组件 -->
<slot name="header"></slot>
<slot name="default"></slot>
<slot name="footer"></slot>

然后在父组件里这样使用：

<my-card>
  <template #header>
    <h1>这里是标题</h1>
  </template>

  <p>这是主要内容</p>

  <template #footer>
    <button>提交</button>
  </template>
</my-card>

这里的 #header 和 #footer 就对应了具名插槽的名字，而中间那段 <p> 标签会自动放到 name="default" 的那个 slot 里。

吐槽大师

吐槽大师（Roast Master） - 终极 AI 吐槽生成器，适用于 Instagram，Facebook，Twitter，Threads 和 Linkedin

26

查看详情

这种方式特别适合结构清晰、需要多处定制的组件，比如布局组件、表单组件等。

作用域插槽：把子组件数据暴露给父组件

有时候我们希望父组件在使用插槽的时候能访问到子组件的数据，这时候就要用到作用域插槽（scoped slot）。

举个例子，子组件内部有一个列表项数组，你想让父组件决定怎么渲染每个 item，但又不想暴露整个子组件逻辑。

子组件可以这样写：

<slot v-for="item in items" :item="item"></slot>

然后父组件这样使用：

<my-list>
  <template #default="{ item }">
    <li>{{ item.label }}</li>
  </template>
</my-list>

这里的关键在于子组件通过 :item="item" 把数据绑定到了 slot 上，父组件则通过解构的方式拿到这个数据。这种模式在封装可复用列表、表格等组件时非常有用。

也可以结合 v-slot 指令来写更复杂的逻辑，比如传多个变量或者函数进去，实现更灵活的交互。

总结一下几种常见方式：

• 默认插槽：适用于单一内容插入
• 具名插槽：用于组件多个区域需要自定义
• 作用域插槽：让父组件能基于子组件数据来渲染内容

基本上就这些，不复杂但容易忽略细节，比如默认值、作用域传递方式这些，刚开始用的时候可能会踩坑。

以上就是Vue的插槽（slot）有哪些常见的使用方式？的详细内容，更多请关注php中文网其它相关文章！