界面设计网站如何做品牌推广方案
在使用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 的组件了