vue3 二次封装uni-ui中的组件，并且组件中有 v-model 的解决方法

在使用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 的组件了