[TOC] ## 概述 可用于一些随数据更新的场景 在Taro Vue模式中，CustomWrapper主要用于： 1. 解决小程序自定义组件中的动态渲染问题 2. 处理复杂的条件渲染和列表渲染 3. 支持插槽（slot）内的动态内容 使用建议： * 只在必要时使用CustomWrapper * 避免嵌套多层 CustomWrapper * 静态内容无需使用 CustomWrapper * 在处理复杂动态内容时，合理组织组件结构处理复杂的条件渲染和列表渲染 ## 示例 ### 条件更新 ``` <custom-wrapper> <template v-if="condition"> <view>条件内容A</view> </template> <template v-else> <view>条件内容B</view> </template> </custom-wrapper> ``` ### 在自定义组件中使用 ``` <!-- CustomComponent.vue --> <template> <view class="custom-component"> <custom-wrapper> <slot></slot> </custom-wrapper> </view> </template> <script> import { CustomWrapper } from '@tarojs/components' export default { components: { CustomWrapper } } </script> <!-- 父组件使用 --> <template> <custom-component> <template v-if="showContent"> <view>动态内容</view> </template> </custom-component> </template> ``` ### 列表渲染场景 ``` <custom-wrapper> <view v-for="(item, index) in list" :key="index" class="list-item" > {{ item.name }} <template v-if="item.showExtra"> <view class="extra">{{ item.extra }}</view> </template> </view> </custom-wrapper> ``` ### 复杂动态内容 ``` <custom-wrapper> <!-- 动态表单项 --> <template v-for="(field, index) in formFields" :key="index"> <view class="form-item"> <template v-if="field.type === 'input'"> <input v-model="formData[field.name]" :placeholder="field.placeholder" /> </template> <template v-else-if="field.type === 'select'"> <picker :range="field.options" @change="handleSelect($event, field.name)" > <view>{{ formData[field.name] || '请选择' }}</view> </picker> </template> </view> </template> </custom-wrapper> ```