vue实现slot

Vue 插槽（Slot）实现方法

Vue 插槽（Slot）是一种强大的内容分发机制，允许父组件向子组件传递模板片段。以下是 Vue 中实现插槽的几种常见方法。

默认插槽

默认插槽是最基础的插槽类型，用于接收父组件传递的任意内容。

子组件定义：

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件使用：

<template>
  <ChildComponent>
    <p>这段内容会显示在子组件的插槽位置</p>
  </ChildComponent>
</template>

具名插槽

具名插槽允许定义多个插槽，并通过名称进行区分。

子组件定义：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <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>

作用域插槽

作用域插槽允许子组件向插槽传递数据，父组件可以使用这些数据。

子组件定义：

<template>
  <div>
    <slot :user="user" :age="age"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: '张三',
      age: 25
    }
  }
}
</script>

父组件使用：

<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>用户名: {{ slotProps.user }}</p>
      <p>年龄: {{ slotProps.age }}</p>
    </template>
  </ChildComponent>
</template>

缩写语法

Vue 提供了插槽的缩写语法，使代码更简洁。

具名插槽缩写：

<template #header>
  <h1>缩写头部内容</h1>
</template>

作用域插槽缩写：

<template #default="{ user, age }">
  <p>用户名: {{ user }}</p>
  <p>年龄: {{ age }}</p>
</template>

动态插槽名

动态插槽名允许根据变量动态指定插槽名称。

父组件使用：

<template>
  <ChildComponent>
    <template v-slot:[dynamicSlotName]>
      <p>动态插槽内容</p>
    </template>
  </ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header'
    }
  }
}
</script>

插槽默认内容

可以为插槽定义默认内容，当父组件没有提供内容时显示。

子组件定义：

<template>
  <div>
    <slot>
      <p>这是默认显示的内容</p>
    </slot>
  </div>
</template>

这些方法涵盖了 Vue 插槽的主要使用场景，可以根据实际需求选择适合的实现方式。