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 

//父组件

你可能感兴趣的:(vue2.0,html,前端)