vue：v-model实现子组件和父组件数据双向绑定

参考文档：父子组件通信之v-model_一見如故的博客-CSDN博客_父子组件v-model

vue双向绑定v-model实现子组件修改数据 - 大哈博客

Vue中子组件修改父组件的值(使用v-model优化,所有自定义组件可用v-model)_目标前端大佬的博客-CSDN博客

一、父组件

<pic-upload v-model="form.image" />

二、子组件 pic-upload.vue

export default {
  name: 'FileUpload',
  model: {
    prop: 'value',
    event: 'change'
  },

  props: {
    value: {
      type: String,
      default: () => {
        return ''
      }
    }
  },

  watch: {
    //监听子组件数据变化
    imageUrl: function(newVal){
      //更新父组件数据
      this.$emit('change', newVal);
    },
    //监听父组件数据变化
    value: function(newVal){
      //更新子组件数据
      this.imageUrl = newVal;
    }
  },

  data() {
    return {
      imageUrl: null,
    }
  },

  created() {
    //组件初始化时，将父组件数据保存到子组件数据中
    this.imageUrl = this.value;
  },
},