在使用uniapp+vue3開發中， 使用了uni-ui的組件，但是我們也需要自定義組件，比如我要自定一個picker 的組件， 是在 uni-data-picker 組件的基礎上進行封裝的
父組件中的代碼
<classesselect :selectclass="selectclass" :classinfotree="classinfotree"></classesselect>
<script setup>
import classesselect from "./components/classesselect.vue"//班級選項數據
const classinfotree = ref([{text:"摩爾英語1班",value:1
},{text:"摩爾英語2班",value:2
},{text:"摩爾英語3班",value:3
}]);//父組件中記錄選中的數據
const selectclass = ref(3)</script>
如下圖：子組件的名稱是 classesselect ,代碼如下
<template><view class="comwrapper"><view class="typesel"><view class="underline"><uni-data-picker :clear-icon="false" :localdata="classinfotree" //這里接收你組件傳來的 選項數據v-model="classselect" //這里是選中的數據 **********這里其實就是用錯誤的了 錯誤 錯誤 錯誤*********></uni-data-picker></view></view></view>
</template>
<script setup>
//班級選擇器
import { ref } from "vue"const props = defineProps(["classinfotree","selectclass"])
</script>
上面的代碼就已經出現錯誤了， 更別說運行了， 因為 子組件的v-model ，直接在子組件中改變了 父組件傳來的值 ，這在vue3中是不被允許的
解決辦法：我們來先看一下，官網對 v-model的解釋
可以看到， 問題就在 @update:model-value=''newValue => searchText = newValue "，這個代碼中，它就相當于在子組件中， 修改了父組件的代碼
所以， 我們對 子組件的 v-model 進行還原，并且 改寫 update:model-value 的方法就可以了
下面是解決之后的代碼
首選， 我們把子組件中的 v-model 的代碼還原
同時子組件中實現方法
function handleModelValue (val) {emits('update:modelValue', val) //觸發父組件中的方法， 并把新的子組件中的值傳送到父組件中
}
————————————
然后是父組件中的代碼
通過以上的改寫， 就可以正常的封裝 uniui中 帶有 v-model 的組件了
