Vue组件Prop的双向绑定-两种语法糖

1.通过v-model

// 父组件通过v-model传递val值
<template> 
    <child-component v-model="val" /> 
</template>

// 子组件内通过 `model` 选项去绑定这个prop
<template> 
    <input type="text" v-model="childValue" @input="handleClick"/> 
</template>

// 方式-1
export default {
  model: {
    prop: 'anyKey',  // 不一定非要是value
    event: 'anyEventName'  // 不一定非要是input
  },
  props: {
    anyKey: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data(){
    return {
        childValue: this.anykey
    }
  },
  watch: {
      anyKey(newValue){
          // 监听anykey，同步父组件传递过来的值;
          this.childValue = newValue;
      }
  },
  methods: {
    handleClick() {
      // 通过$emit触发handleClick（model内定义）事件，将内部值传递给给父组件;
      this.$emit('anyEventName', this.childValue)
    }
  }
}

// 方式-2
export default {
  props: {
    // 父组件传递的值，默认value属性；
    value: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data(){
      return {
          childValue: this.value
      }
  },
  wacth: {
      value(newVal){
          // 监听anykey，同步父组件传递过来的值;
          this.chilcValue = newVal;
      }
  },
  methods: {
    handleClick() {
      // 传递给父组件的值，默认input事件；
      this.$emit('input', this.childValue)
    }
  }
}

2.通过.sync修饰符

// 父组件通过.sync修饰符传递val值，val子组件接受值
<template> 
    <child-component :val.sync="val" /> 
</template>

// 子组件
<template> 
    <input type="text" v-model="childValue" @input="handleClick"/> 
</template>

// 子组件内直接接收，vue内部绑定`update:myPropName`事件
export default {
  props: {
    val: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data(){
      return {
        childValue: this.val
    }
  },
  watch: {
      val(newValue){
          // 监听val，同步父组件传递过来的值;
          this.childValue = newValue;
    }
  },
  methods: {
    handleClick() {
      // 传递给父组件的值 update: 抛出属性值；
      this.$emit('update:val', this.childValue)
    }
  }
}