vue slot实现

vue slot 的实现方法

在 Vue 中，slot 是一种内容分发机制，允许父组件向子组件传递模板内容。以下是几种常见的 slot 实现方式：

默认 slot

默认 slot 是最基础的 slot 使用方式，父组件可以在子组件标签内插入任意内容，这些内容会替换子组件中的 <slot> 标签。

子组件代码：

<template>
  <div>
    <h2>子组件标题</h2>
    <slot></slot>
  </div>
</template>

父组件代码：

<template>
  <child-component>
    <p>这是插入到子组件中的内容</p>
  </child-component>
</template>

具名 slot

具名 slot 允许父组件将内容插入到子组件的特定位置，通过 name 属性来标识不同的 slot。

子组件代码：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件代码：

<template>
  <child-component>
    <template v-slot:header>
      <h1>自定义头部</h1>
    </template>
    <p>默认 slot 内容</p>
    <template v-slot:footer>
      <p>自定义底部</p>
    </template>
  </child-component>
</template>

作用域 slot

作用域 slot 允许子组件将数据传递给父组件，父组件可以使用这些数据来渲染内容。

子组件代码：

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

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

父组件代码：

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

动态 slot 名

动态 slot 名允许通过变量动态指定 slot 名称，增加灵活性。

父组件代码：

<template>
  <child-component>
    <template v-slot:[dynamicSlotName]>
      <p>动态 slot 内容</p>
    </template>
  </child-component>
</template>

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

slot 缩写语法

Vue 提供了 v-slot 的缩写语法，可以用 # 代替 v-slot:。

父组件代码：

<template>
  <child-component>
    <template #header>
      <h1>缩写语法头部</h1>
    </template>
  </child-component>
</template>

以上方法涵盖了 Vue slot 的主要使用场景，可以根据实际需求选择合适的方式来实现内容分发。