关键词：vue3 条件插槽

可以查看官网: https://cn.vuejs.org/guide/components/slots#conditional-slots

在 Vue 中，条件插槽可以通过结合使用 $slots 属性与 v-if 来实现动态地根据特定条件渲染不同的内容到插槽中。

一、基本概念

条件插槽允许在父组件向子组件传递内容时，根据一定的条件来决定渲染哪个插槽的内容。通过使用 $slots 属性可以访问子组件中的插槽内容，然后结合 v-if 进行条件判断来选择要渲染的部分。

二、使用方法

1. 在子组件中定义插槽：

   <template>
     <div>
       <slot v-if="$slots.conditionalSlot" name="conditionalSlot"></slot>
       <slot v-else name="defaultSlot"></slot>
     </div>
   </template>

   在这个子组件中，定义了两个插槽，一个名为 conditionalSlot，另一个名为 defaultSlot。通过判断 $slots.conditionalSlot 是否存在来决定渲染哪个插槽。

2. 在父组件中使用条件插槽：

   <template>
     <ChildComponent>
       <template v-if="someCondition" #conditionalSlot>
         <!-- 条件成立时要渲染的内容 -->
         <p>Conditional content</p>
       </template>
       <template v-else #defaultSlot>
         <!-- 条件不成立时要渲染的内容 -->
         <p>Default content</p>
       </template>
     </ChildComponent>
   </template>

   在父组件中，根据 someCondition 的值来决定向子组件的插槽中传递不同的内容。当 someCondition 为真时，传递名为 conditionalSlot 的插槽内容；当 someCondition 为假时，传递名为 defaultSlot 的插槽内容。

三、优势

1. 动态性：可以根据不同的条件动态地渲染不同的内容，使组件更加灵活适应各种场景。
2. 可维护性：将不同情况下的内容分别组织在不同的模板中，使得代码更加清晰易读，便于维护。
3. 代码复用：通过条件插槽，可以在不同的场景下复用同一个子组件，只需要在父组件中根据不同的条件传递不同的内容即可。