vue组件数据双向绑定

v-model

父组件=>子组件   ( 父组件的昵称传递给子组件)

父:

子:

props: {
    value: {
      type: String,
      required: true
    }
  }
data() {
    return {
      localName: this.value
    };
  },

子组件=>父组件    input为vue2中内置的属性

this.$emit("input", this.localName);

其中v-model传递给子组件的prop默认名称为value,事件默认为input,如果想要修改这两个默认值,可以使用model来重新指定,如上面的例子中,指定v-model传递给子组件的名称为msg,事件为change

props: {
        msg: String
    },
model: {
        prop: 'msg',
        event: 'change'
    },
methods：{
        handleChange(){
        this.$emit("change", this.localName);
    }
}

---

.sync

父:

子：

 props: {
    gender: {
      type: Number,
      required: true
    }
  },

子传父:

 this.$emit('update:gender', this.localGender)

---

vue3取消了.sync这种语法，使用v-model:title 语法代替

// 父组件

//子组件

 

vue3允许写多个v-model,vue2不允许写多个v-model 

//父组件