vue2 父子传值v-model双向绑定

父组件

// yf-captcha为子组件 使用v-model将postForm传与子组件
<template>
	...
	<el-form-item prop="captchaValue">
	  <yf-captcha v-model="postForm" />
	</el-form-item>
	...	
</template>

import YfCaptcha from '@/components/Captcha';

data() {
	postForm: {
	    username: '',
	    password: '',
	    captchaKey: '',
	    captchaValue: ''
	  },
}

子组件

<script>
export default {
  name: "YfCaptcha",
  // props接收父组件的v-model传值，不管父组件v-model传值时使用什么名字，此处使用value即可接受到。
  props: {
    value: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      model: { captchaValue: "", captchaKey: "" }
    };
  },
  created() {
  	// this.value 就是父组件传过来的，由于是一个对象，所以此时是把对象的地址赋值给了this.model
    this.model = this.value;
    this.changeCode();
  },
  methods: {
    changeCode() {
      this.model.captchaKey = uuid.v4();
      // 此出'input'用处就是将this.model的值，传回给父组件定义的v-model的'postForm'。至于具体原理，想弄清楚可以去看vue2源码，此处只写使用方法。
      this.$emit("input", this.model);
    }
  }
};
</script>

最后，简单来说父组件通过v-model绑定了一个变量给子组件。
此时子组件可以接收这个变量，prop['value']，此时这个‘value’是固定的写法，可使用this.value对该值进行操作。
也可以修改这个变量传回给父组件，this.$emit('input', xxxx)，此时这个’input’也是固定写法，此时父组件绑定的变量的值就会变成 xxxx 。