uniapp插槽加判断
在UniApp中使用插槽并添加条件判断
UniApp基于Vue.js，因此插槽（slot）和条件判断（v-if/v-show）的使用方式与Vue一致。以下是在组件中使用插槽并添加条件判断的几种方法：
基础插槽与条件判断
父组件中使用子组件时，通过插槽传递内容并添加条件：
<!-- 子组件 child.vue -->
<template>
<view>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</view>
</template>
<!-- 父组件 -->
<child>
<template v-slot:header v-if="showHeader">
<view>这是条件显示的头部内容</view>
</template>
<view v-if="showDefault">
这是默认插槽的条件内容
</view>
<template #footer>
<view>这是始终显示的底部内容</view>
</template>
</child>作用域插槽与条件判断
子组件向插槽传递数据，父组件根据数据决定显示：
<!-- 子组件 -->
<template>
<view>
<slot :user="user" v-if="userLoaded"></slot>
</view>
</template>
<script>
export default {
data() {
return {
user: { name: '张三' },
userLoaded: false
}
},
mounted() {
setTimeout(() => {
this.userLoaded = true
}, 1000)
}
}
</script>
<!-- 父组件 -->
<child>
<template v-slot:default="slotProps" v-if="slotProps.user">
<view>用户: {{slotProps.user.name}}</view>
</template>
</child>动态插槽名与条件判断
结合动态插槽名和条件判断实现更灵活的控制：
<!-- 父组件 -->
<child>
<template #[dynamicSlotName] v-if="shouldShowSlot">
<view>动态插槽内容</view>
</template>
</child>
<script>
export default {
data() {
return {
dynamicSlotName: 'header',
shouldShowSlot: true
}
}
}
</script>注意事项
- 作用域插槽的条件判断可以放在父组件或子组件中，根据业务需求选择
- v-if和v-show的区别：v-if是条件渲染，v-show是条件显示（始终渲染）
- 动态插槽名需要使用方括号语法（v-slot:[name]或#[name]）
- 在UniApp中所有模板语法都需要写在标签中
通过合理组合插槽和条件判断，可以创建高度可复用和灵活的组件结构。
