Vue 插槽

Vue 的插槽（Slots）机制允许父组件向子组件传递内容，从而实现更灵活和可复用的组件设计。通过插槽，您可以将 HTML 内容、文本甚至其他组件传递给子组件，并在子组件中定义这些内容的具体位置。以下是关于 Vue 插槽的详细介绍，包括不同类型的插槽及其使用方法。

1. 默认插槽

默认插槽是最基本的形式，它允许父组件将任意内容插入到子组件的指定位置。

子组件定义

<!-- ChildComponent.vue -->
<template>
  <div class="slot-container">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "ChildComponent",
  };
</script>

父组件使用

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <p>这是默认插槽的内容。</p>
  </child-component>
</template>

<script>
  import ChildComponent from "./ChildComponent.vue";

  export default {
    components: { ChildComponent },
  };
</script>

2. 具名插槽

具名插槽允许多个插槽的存在，并且每个插槽都有一个名字，父组件可以根据名字来填充相应的内容。

子组件定义

<!-- ChildComponent.vue -->
<template>
  <div class="slot-container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件使用

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:header>
      <h1>这里是标题</h1>
    </template>

    <p>这是默认插槽的内容。</p>

    <template #footer>
      <p>这里是页脚</p>
    </template>
  </child-component>
</template>

注意：v-slot:header 和 #header 是等价的语法糖，选择您觉得更方便的一种使用。

3. 作用域插槽

作用域插槽允许子组件向父组件传递数据，父组件可以在传递的内容中访问这些数据。

子组件定义

<!-- ChildComponent.vue -->
<template>
  <div class="slot-container">
    <slot :user="user"></slot>
  </div>
</template>

<script>
  export default {
    name: "ChildComponent",
    data() {
      return {
        user: { name: "John Doe", age: 30 },
      };
    },
  };
</script>

父组件使用

<!-- ParentComponent.vue -->
<template>
  <child-component v-slot:default="slotProps">
    <p>{{ slotProps.user.name }} is {{ slotProps.user.age }} years old.</p>
  </child-component>
</template>

简化写法：

<!-- ParentComponent.vue -->
<template>
  <child-component v-slot="{ user }">
    <p>{{ user.name }} is {{ user.age }} years old.</p>
  </child-component>
</template>

4. 动态插槽名称

在某些情况下，插槽名称可能是动态的。可以使用 v-bind 来绑定动态插槽名称。

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:[dynamicSlotName]>
      <p>这是动态插槽的内容。</p>
    </template>
  </child-component>
</template>

<script>
  export default {
    data() {
      return {
        dynamicSlotName: "header", // 可以根据逻辑改变这个值
      };
    },
  };
</script>

5. 匿名插槽与具名插槽的混合使用

可以在同一个子组件中同时使用匿名插槽和具名插槽，以实现更加复杂的布局需求。

<!-- ChildComponent.vue -->
<template>
  <div class="slot-container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:header>
      <h1>这里是标题</h1>
    </template>

    <p>这是默认插槽的内容。</p>
  </child-component>
</template>

总结

Vue 的插槽机制为组件提供了极大的灵活性，使得组件不仅可以封装功能，还可以定制化内容。无论是简单的默认插槽，还是复杂的作用域插槽，都可以帮助开发者构建更加模块化和可维护的应用程序。如果您有更多问题或需要进一步的帮助，请随时告诉我！