vue插槽实现

Vue 插槽的基本用法

插槽（Slot）是 Vue 组件化开发中的重要特性，用于在父组件中向子组件传递模板内容。通过插槽可以实现灵活的组件内容分发。

在子组件中通过 <slot> 标签定义插槽位置：

<!-- 子组件 Child.vue -->
<template>
  <div>
    <h2>子组件标题</h2>
    <slot></slot>
  </div>
</template>

在父组件中可以向插槽传递任意内容：

<!-- 父组件 Parent.vue -->
<template>
  <Child>
    <p>这是插入到子组件中的内容</p>
  </Child>
</template>

具名插槽

当需要多个插槽时，可以使用具名插槽实现更精确的内容分发。

子组件中定义具名插槽：

<!-- 子组件 Layout.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>  <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件中使用 v-slot 指令指定插槽名称：

<!-- 父组件 Page.vue -->
<template>
  <Layout>
    <template v-slot:header>
      <h1>页面标题</h1>
    </template>

    <p>主要内容区域</p>

    <template v-slot:footer>
      <p>版权信息</p>
    </template>
  </Layout>
</template>

作用域插槽

作用域插槽允许子组件将数据传递给父组件中的插槽内容，实现更灵活的渲染控制。

子组件通过插槽属性传递数据：

<!-- 子组件 List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  }
}
</script>

父组件通过 v-slot 接收数据：

<!-- 父组件 App.vue -->
<template>
  <List>
    <template v-slot:default="slotProps">
      <span>{{ slotProps.item.name }}</span>
    </template>
  </List>
</template>

插槽缩写语法

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

具名插槽缩写：

<template #header>
  <h1>标题</h1>
</template>

作用域插槽缩写：

<template #default="slotProps">
  <span>{{ slotProps.item.name }}</span>
</template>

动态插槽名

Vue 2.6.0+ 支持动态插槽名，可以根据数据动态确定插槽位置：

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

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

插槽默认内容

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

<!-- 子组件 Button.vue -->
<template>
  <button>
    <slot>默认按钮文本</slot>
  </button>
</template>