Vue 中 vue 的 solt 的用法？

在 Vue 中，<slot> 元素是用于插槽内容的标记，允许父组件向子组件传递内容。

使用 <slot> 插槽：

1. 单个插槽： 最简单的用法是在子组件中使用 <slot> 标签定义一个默认插槽，用于显示父组件传递的内容。

<!-- ChildComponent.vue -->
<template>
  <div class="child-component">
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

2. 具名插槽： 通过给 <slot> 设置 name 属性，定义具名插槽，可以传递不同名称的内容。

<!-- ChildComponent.vue -->
<template>
  <div class="child-component">
    <!-- 具名插槽 -->
    <slot name="header"></slot>
    <div class="content">
      <!-- 默认插槽 -->
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

在父组件中使用插槽：

在父组件中使用子组件时，通过向子组件的标签内部添加内容来填充插槽。

<!-- ParentComponent.vue -->
<template>
  <div class="parent-component">
    <child-component>
      <!-- 默认插槽 -->
      <p>这是父组件传递给子组件的内容。</p>
      <!-- 具名插槽 -->
      <template v-slot:header>
        <h2>这是头部内容</h2>
      </template>
      <template v-slot:footer>
        <footer>这是页脚内容</footer>
      </template>
    </child-component>
  </div>
</template>

在父组件中，通过使用 <slot> 和 v-slot（或 # 的简写）来向子组件的插槽中传递内容。v-slot 可以用于具名插槽的填充，而默认插槽则直接在子组件标签内添加内容即可。

插槽功能使得父组件能够向子组件传递任意的内容，增加了组件的灵活性和复用性，能够根据不同的情况动态地传递不同的内容。