Vue3中 子组件内v-model绑定props接收到参数时报错update:modelValue

 开发过程中二次封装了一个搜索的组件，子组件内使用了el-select和el-input

参数分别对应父组件传入的selectValue和selectText参数

子组件内部@change和@input事件来同步触发组件中数据的修改

最终本地开发环境一切正常，部署到测试环境和生产环境后出现下方报错：

selectValue is not defined at d.onUpdate:modelValue.s.<computed>.s.<computed>

报错后开始反复查看本地都是没有任何警告的，但是测试环境就是有问题，没有办法只能根据控制台报错找原因，onUpdate:modelValue应该是在子组件内触发父组件修改导致的错误，但是确实给el-select绑定了@change事件。

后续参考Vue官网对于props的介绍，应该是@change事件的触发时机问题，虽然在数据改变后立马进行了emit，但还是不符合vue中props的单向数据流原则，解决方案：

Props | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/components/props.html#one-way-data-flow

• 在子组件内定义两个变量
• 以计算属性的方式在get内第一时间接收父组件传入数据的变化
• 当子组内v-model绑定的数据发生变化时，在set内触发父组件数据更新

原报错代码：

html结构：

<div class="searchBox"><div><el-selectv-model="selectValue":style="{ width: selectWidth }"@change="emit("update:selectValue", selectValue)"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><el-inputv-model.trim="searchText"@input="emit('update:searchText', searchText.trim())":placeholder="`请输入要查找的${selectLabel}`"@keyup.enter="emit('getTemplate')"></el-input><el-button type="primary" @click="emit('getTemplate')">搜索</el-button></div></div>

js：

const emit = defineEmits(["openDialog","getTemplate","update:selectValue","update:searchText",
]);
const props = defineProps({selectValue: String,searchText: String,showAddBtn: {type: Boolean,default: true,},selectWidth: {type: String,default: "100px",},options: {type: Array,default: () => [],},
});

后续使用了compute计算属性get/set来触发props数据的修改就解决了问题

修改后代码：html中删除@change和@input事件后，基于上方js代码添加：

//在上面js代码基础上加上
const selectValue = computed({get: () => props.selectValue,set: (val) => {emit("update:selectValue", val);},
});const searchText = computed({get: () => props.searchText,set: (val) => emit("update:searchText", val),
});