[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> ```