uniapp插槽加判断

在UniApp中使用插槽加条件判断

UniApp支持Vue的插槽机制，可以通过条件判断动态控制插槽内容的显示。以下方法实现插槽与条件判断的结合：

基本插槽与v-if结合

<template>
  <view>
    <custom-component>
      <template v-slot:default v-if="showSlot">
        <text>默认插槽内容</text>
      </template>
    </custom-component>
  </view>
</template>

具名插槽条件渲染

<template>
  <view>
    <custom-component>
      <template v-slot:header v-if="hasHeader">
        <text>头部内容</text>
      </template>

      <template v-slot:footer v-if="showFooter">
        <text>底部内容</text>
      </template>
    </custom-component>
  </view>
</template>

作用域插槽与条件判断

<template>
  <view>
    <list-component :items="dataList">
      <template v-slot:item="slotProps" v-if="slotProps.item.visible">
        <text>{{ slotProps.item.text }}</text>
      </template>
    </list-component>
  </view>
</template>

动态插槽名

<template>
  <view>
    <dynamic-component>
      <template #[dynamicSlotName] v-if="shouldRender">
        <text>动态插槽内容</text>
      </template>
    </dynamic-component>
  </view>
</template>

组件内控制插槽渲染 在组件内部可以通过$slots判断插槽是否存在：

export default {
  computed: {
    hasDefaultSlot() {
      return !!this.$slots.default
    }
  }
}

注意事项

• 条件判断应尽量放在插槽外部，避免频繁创建/销毁插槽内容
• 作用域插槽的条件判断可以访问插槽传递的属性
• 动态插槽名需要配合计算属性使用更高效
• 在H5和小程序端表现一致，但要注意部分平台的渲染差异