首页 > 编程学习 > Vue3中 子组件内v-model绑定props接收到参数时报错update:modelValue

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

参数分别对应父组件传入的selectValueselectText参数

子组件内部@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),
});


本文链接:https://www.ngui.cc/article/show-738572.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000