vue.js中默认插槽 / 后备内容 / 具名插槽 / 作用域插槽

这些概念都与 Vue.js 中的插槽相关，下面我会依次介绍它们：

默认插槽（Default Slot）：

默认插槽是 Vue.js 中最基本的插槽类型。当父组件传递内容到子组件时，如果没有使用具名插槽，那么这些内容就会被放置在子组件的默认插槽中。在子组件中，可以通过 元素来标记默认插槽的位置。如果父组件没有提供内容，那么默认插槽中会显示默认的内容。
示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <!-- 这里的内容将放置在子组件的默认插槽中 -->
    <p>This is default slot content.</p>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

后备内容（Fallback Content）：

后备内容是指在父组件未提供内容时，子组件应该显示的默认内容。在子组件中可以使用特殊的 元素来定义后备内容，这个插槽会在父组件没有传递内容时被显示。
示例：

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- 如果父组件没有传递内容，则显示后备内容 -->
    <slot>
      <p>This is fallback content.</p>
    </slot>
  </div>
</template>

具名插槽（Named Slots）：

除了默认插槽外，Vue.js 还支持具名插槽，这使得父组件能够向子组件传递多个不同的内容，并由子组件在不同位置进行显示。在子组件中，可以使用 v-slot 指令来定义具名插槽。
示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <!-- 使用具名插槽 -->
    <template v-slot:header>
      <h1>Header</h1>
    </template>
    <template v-slot:footer>
      <p>Footer</p>
    </template>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <header>
      <!-- 使用具名插槽 -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 默认插槽 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 使用具名插槽 -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

作用域插槽（Scoped Slots）：

作用域插槽是 Vue.js 中一种特殊的插槽，它允许子组件向父组件传递数据。通过作用域插槽，父组件可以在子组件中使用具名插槽，并传递数据到插槽中。在子组件中，可以通过在插槽中使用 元素并绑定数据，来定义作用域插槽的内容和行为。
示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <!-- 使用作用域插槽 -->
    <template v-slot:default="slotProps">
      <p>{{ slotProps.message }}</p>
    </template>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- 定义作用域插槽，并将数据传递给父组件 -->
    <slot :message="message"></slot>
  </div>
</template>

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

以上是关于默认插槽、后备内容、具名插槽和作用域插槽的简要介绍和示例。这些功能使得 Vue.js 中的组件化开发更加灵活和强大，能够更好地满足不同的业务需求。