Vue 中插槽（Slot）用法

Vue 中插槽（Slot）用法

• （一）插槽用法概念
• （二）插槽的基本类型
• • 1. 默认插槽（Default Slot）
  • 2. 具名插槽（Named Slots）
  • 3. 作用域插槽（Scoped Slots）
  • 4. 动态插槽名（Dynamic Slot Names）
  • 5. 插槽后备内容（Slot Fallback Content）
  • 6. Vue 2.6.0之前与Vue 2.6.0后的比对
  • • 6.1 默认插槽 缩写（由不写变成v-slot）
    • 6.2 具名插槽 缩写 （由slot变成 v-slot）
    • 6.3 作用域插槽 缩写 （由slot变成 v-slot）
• （三）插槽中数据传递方式
• 归纳

（一）插槽用法概念

在Vue中，子组件的模板可以定义多个插槽（包括默认插槽和具名插槽等等），
而父组件在引用子组件时，可以根据需要 有选择性的为这些插槽插入内容。
如果父组件没有为某个插槽提供内容，那么子组件的模板中该插槽的位置将显示为该插槽的默认内容（如果有的话），或者简单地留空。

（二）插槽的基本类型

1. 默认插槽（Default Slot）

• 定义：没有指定名称的插槽，用于接收父组件传递的未明确指定插槽名称的内容。
• 用法：在子组件中使用定义默认插槽的位置，父组件中直接放在子组件标签内的内容会被渲染到该位置。

举例说明：
子组件 (DefaultSlotChild.vue)

父组件

父组件上最终效果

2. 具名插槽（Named Slots）

• 定义：带有名称的插槽，用于接收父组件中明确指定插槽名称的内容。
• 用法：在子组件中使用定义具名插槽，父组件中通过