vue2中的插槽

在 Vue 2 中，插槽（slots），允许你将父组件的内容传递到子组件中，并在子组件的模板中指定内容的显示位置。

1. 默认插槽

默认插槽是最基础的插槽形式。如果子组件只有一个插槽并且不命名，那么它就是默认插槽。父组件可以通过插槽将内容传递给子组件。

子组件：

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

父组件：

<template>
  <child-component>
    <p>This is passed to the child component's default slot.</p>
  </child-component>
</template>

2. 具名插槽

具名插槽允许你在子组件中定义多个插槽，并通过名称来指定内容应该放置的具体位置。

子组件：

<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>This is the header</h1>
    </template>
    <p>This is the main content passed to the default slot.</p>
    <template v-slot:footer>
      <p>This is the footer</p>
    </template>
  </child-component>
</template>

3. 作用域插槽

作用域插槽（Scoped Slots）允许子组件将数据传递给插槽内容。父组件可以利用这些数据来动态渲染内容。

子组件：

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

<script>
export default {
  data() {
    return {
      user: { name: 'Alice' }
    };
  }
};
</script>

父组件：

<template>
  <child-component v-slot:default="slotProps">
    <p>User Name: {{ slotProps.user.name }}</p>
  </child-component>
</template>

子组件通过 slot 标签中的 :user="user" 将 user 对象作为插槽数据传递给父组件，父组件可以通过 slotProps.user.name 来访问并展示这个数据。

4. 动态插槽名

在 Vue 2.6+ 版本中，你可以使用动态插槽名。这允许插槽的名字是一个动态的表达式。

子组件：

<template>
  <div>
    <slot :name="dynamicSlotName"></slot>
  </div>
</template>

父组件：

<template>
  <child-component>
    <template v-slot:[dynamicSlotName]>
      <p>Dynamic content here</p>
    </template>
  </child-component>
</template>

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