插槽 Slots

不同的父组件在引用子组件的时候，可能会针对子组件做一些定制，或者插入一些自己的 DOM 元素，这时就可以使用插槽。

子组件提供一个供父组件自定义的区域 <slot></slot> ，父组件引用的时候，可以传入自定义的 DOM 元素。

slot 可以分为两种类型：

默认插槽：一个组件中只能定义一个
具名插槽：带有标识符的插槽

默认插槽

子组件在需要插入默认内容的位置，使用 <slot></slot> 标签

vue

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

父组件引用的时候，可以传入自定义的 DOM 元素

vue

<template>
  <div>
    <ChildComponent>
      <h1>Hello, World!</h1>
    </ChildComponent>
  </div>
</template>

具名插槽

具名插槽可以在子组件中定义多个，还可以根据需要灵活的将内容插入到想要插入的插槽中。

在子组件中，可以给 slot 标签添加一个 name 属性，来定义插槽的名称，没有提供 name 的 slot 会隐式地命名为 default。

vue

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件通过 v-slot:name 指令来引用具名插槽，指令可以使用缩写形式 #name，并传入自定义的 DOM 元素。

vue

<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>Header</h1>
      </template>
      <template #default>
        <p>Default Content</p>
      </template>
      <template #footer>
        <p>Footer</p>
      </template>
    </ChildComponent>
  </div>
</template>

动态组件

动态组件可以实现组件的动态切换，通过 <component> 标签的 is 属性来指定要渲染的组件。

vue

<template>
  <div>这是动态组件1</div>
</template>

<template>
  <div>这是动态组件2</div>
</template>

vue

<template>
  <div>
    <button @click="currentComponent = 'ChildComponent1'">ChildComponent1</button>
    <button @click="currentComponent = 'ChildComponent2'">ChildComponent2</button>
    <component :is="currentComponent"></component>
  </div>
</template>
<script setup>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';
import { ref } from 'vue';

const currentComponent = ref('ChildComponent1');
</script>

插槽 Slots ​

默认插槽 ​

具名插槽 ​

动态组件 ​

插槽 Slots

默认插槽

具名插槽

动态组件