当组件中使用双向数据绑定
vue传输的prop是单向数据流不可对父中的数据直接改变,当传输的数据是有reactive定义的,那么使用computed去监听,虽然用的computed,但是本质还是用的props中的modelValue进行了绑定
<hy-form v-bind="searchFormConfig" v-model="formData"></hy-form>
const formData = reactive({
id: '',
name: '',
password: '',
sport: '',
createTime: ''
})
上述与直接父子prop传值无异 :formData="formData"
解决
<hy-form v-bind="searchFormConfig" v-model="formData"></hy-form>
const formData = ref({
id: '',
name: '',
password: '',
sport: '',
createTime: ''
})
emits: ['update:modelValue'],
setup(props, { emit }) {
const formData = ref({ ...props.modelValue }) // 再复杂的数据用深拷贝
watch(formData, (newValue) => emit('update:modelValue', newValue), { deep: true })
return {
formData
}
}