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