vue基础（九）

Vue 提供 插槽（Slot） 机制，使组件可以更灵活地复用和拓展内容。插槽允许父组件向子组件传递结构化的内容。

1. 默认插槽（Default Slot）

默认插槽允许父组件传递内容到子组件的特定位置。

结果：

  
我是父组件传递的内容

• 如果 ChildComponent 没有提供插槽内容，slot 的默认内容（默认内容）会显示。
• 但如果 Parent.vue 提供了内容，则它会替换 slot 位置的默认内容。

2. 具名插槽（Named Slots）

具名插槽用于多个插槽的情况，允许父组件向不同位置插入不同的内容。

结果：

  
我是自定义标题
  
我是主要内容
  
我是自定义页脚

• #header 和 #footer 代表对应的具名插槽，只有 p 直接放入的内容属于默认插槽。

3. 作用域插槽（Scoped Slot）

作用域插槽允许子组件将 数据 传递给父组件，以便父组件可以决定如何渲染内容。

结果：

  
用户名：Alice
  
年龄：25

• 子组件 ChildComponent.vue 通过 slot 传递 userData 数据。
• 父组件 Parent.vue 通过 v-slot="{ user }" 结构解构 user 并使用它。

简写：

  
用户名：{{ user.name }}

4. 具名作用域插槽（Scoped Named Slot）

可以结合具名插槽和作用域插槽。

结果：

  
用户信息：Alice，年龄 25

• 子组件的 slot name="profile" 传递 userData。
• 父组件 #profile="{ user }" 绑定数据，并自定义显示方式。

5. 动态插槽名

如果插槽名是动态的，可以用 :name 绑定。

总结

插槽类型	语法	用途
默认插槽		允许父组件传递内容
具名插槽		允许多个插槽分别填充不同内容
作用域插槽		子组件提供数据，父组件决定如何渲染
具名作用域插槽		结合具名插槽和作用域插槽
动态插槽		插槽名动态可变