Vue——父子组件通过v-model传值和显示

Vue的父子组件之间的传值可以通过v-model的方式来传递，非常方便。

子组件

在子组件中定义props为value，通过vue的watch来深度监听，使用immediate立即改变这个监听

props:{
	//一般固定这样写就行，value是父组件v-model绑定来的那个值
    value: [String, Object],
  },

  //父组件的v-model值的获取
  watch:{
    value: {
      handler:function (val,oldVal) {
      	//把我们v-model接收来的值 赋值 给子组件需要这个值的参数
        this.videoForm.showVideoPath = val;
      },
      deep:true,
      immediate: true
    }
  },

  //子组件的值传给父组件的v-model
  //上传成功回调
    handleVideoSuccess(res, file) {
	  /** 业务代码 */
	  
	  //通过$emit("input",值)来提交给父组件的v-model
      this.$emit("input", res.url);
    },

父组件

 <el-form-item label="视频文件">
   <video-upload v-model="form.videoDz"/>
 </el-form-item>