vue3: reactive的问题

58 阅读1分钟

当组件中使用双向数据绑定

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: ''
    })

image.png

image.png

上述与直接父子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
    }
  }