Vue.js 插槽（Slots）详解

插槽是Vue.js中一种强大的特性，允许你在组件中定义一些可以包含额外内容的“插槽”区域。这使得父组件可以向子组件传递DOM元素或其他组件

• 基本用法

在父组件中，你可以在子组件的标签内插入内容，这些内容将被传递到子组件中的插槽中。

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <p>This content will be placed in the default slot.</p>
  </child-component>
</template>
vue
Copy code
<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot><!-- 默认插槽 -->
  </div>
</template>

• 具名插槽

有时候，你可能需要在子组件中定义多个插槽，以便在父组件中传递不同的内容。

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:title>
      <h1>Custom Title</h1>
    </template>
    <template v-slot:content>
      <p>Custom content goes here.</p>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="title"></slot><!-- 名为"title"的插槽 -->
    <slot name="content"></slot><!-- 名为"content"的插槽 -->
  </div>
</template>

• 作用域插槽

有时候，你可能需要在子组件中使用父组件的数据。使用作用域插槽，可以将父组件的数据传递到子组件内部进行渲染。

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

<script>
export default {
  data() {
    return {
      message: "Hello from parent!"
    };
  }
};
</script>
vue
Copy code
<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot><!-- 作用域插槽 -->
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

• 默认插槽内容

如果父组件中没有提供内容给插槽，子组件可以指定默认的插槽内容。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot>This is default content.</slot><!-- 默认插槽内容 -->
  </div>
</template>

• 具名插槽的缩写

可以使用#符号作为v-slot的缩写来定义具名插槽。

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template #title>
      <h1>Custom Title</h1>
    </template>
  </child-component>
</template>

• 插槽的后备内容

你可以在子组件中使用 <slot> 元素的v-if指令，以定义插槽的后备内容，即在父组件中未提供插槽内容时渲染的内容。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot>
      <p>This is default content.</p><!-- 后备内容 -->
    </slot>
  </div>
</template>

• 具名插槽的后备内容

同样，你可以在具名插槽中使用 <slot> 元素的v-if来定义后备内容。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="title">
      <h2>Default Title</h2><!-- 名为"title"插槽的后备内容 -->
    </slot>
  </div>
</template>

Vue.js的插槽（slots）为组件化开发提供了强大的灵活性，可以根据不同的需求在父子组件之间进行内容传递和布局定制