vue2知识点：组件插槽分发

在 Vue 2 中，组件插槽（Slots） 是一种允许父组件向子组件传递内容的机制。插槽分发是指子组件通过插槽将父组件传递的内容分发到不同的区域或位置。

1. 默认插槽（Default Slot）

默认插槽是最常见的插槽形式，父组件将内容传递给子组件，子组件通过<slot></slot>接收。

示例：

<!-- Parent.vue -->
<template>
  <child-component>
    <p>This is some content passed to the child component.</p>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot> <!-- This is the default slot -->
  </div>
</template>

父组件Parent.vue将一段内容传递给子组件ChildComponent.vue，子组件通过<slot></slot>插槽显示该内容。

2. 命名插槽（Named Slots）

命名插槽允许父组件将不同的内容传递到子组件的多个插槽中。每个插槽有一个名字，父组件可以指定插槽名称。

示例：

<!-- Parent.vue -->
<template>
  <child-component>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <template v-slot:footer>
      <footer>Footer Content</footer>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <header><slot name="header"></slot></header> <!-- Named slot for header -->
    <main>
      <slot></slot> <!-- Default slot for main content -->
    </main>
    <footer><slot name="footer"></slot></footer> <!-- Named slot for footer -->
  </div>
</template>

在这个示例中，父组件通过v-slot:header和v-slot:footer分别将内容插入子组件的header和footer插槽。

3. 作用域插槽（Scoped Slots）

作用域插槽允许父组件访问子组件中的数据。通过v-slot指令，父组件可以获得子组件内部的数据并动态渲染插槽内容。

示例：

<!-- Parent.vue -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.message }}</p> <!-- Accessing scoped data -->
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot> <!-- Exposing data via scoped slot -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from child!"
    };
  }
};
</script>

在这个示例中，子组件通过<slot :message="message"></slot>暴露了message数据，而父组件通过v-slot:default="slotProps"接收并使用这个数据。

4. 插槽的默认内容（Fallback Content）

如果父组件没有为某个插槽提供内容，子组件可以提供一个默认内容作为回退。

示例：

<!-- Parent.vue -->
<template>
  <child-component>
    <!-- No content passed for the slot -->
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot>Default content if no slot is provided.</slot> <!-- Default fallback content -->
  </div>
</template>

如果父组件没有为插槽传递内容，ChildComponent.vue中的<slot>将显示默认内容。

5. 多重插槽分发

你可以在子组件中使用多个插槽来接受来自父组件的不同内容，并根据需求将它们分发到不同的位置。

示例：

<!-- Parent.vue -->
<template>
  <child-component>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <template v-slot:main>
      <p>Main content here</p>
    </template>
    <template v-slot:footer>
      <footer>Footer Content</footer>
    </template>
  </child-component>
</template>

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

小结：

• 默认插槽：父组件通过子组件的<slot></slot>传递内容。
• 命名插槽：多个插槽用于不同位置，父组件可以使用v-slot:name来指定插槽。
• 作用域插槽：父组件可以访问子组件的内部数据，并且将其渲染到插槽中。
• 插槽的默认内容：子组件可以提供插槽的默认内容，以防父组件没有传递内容。

这些插槽的使用方式使得 Vue 组件更加灵活和可复用。