vue组件数据双向绑定

v-model

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

父:

<update-name v-model="user.name" @close="isShowUpdateName = false" />

子:

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

父:

<updateGender
        v-if="isShowUpdateGender"
        :gender.sync="user.gender"
        @close="isShowUpdateGender = false">
</updateGender>

子：

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

子传父:

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

---

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

// 父组件
<template>
    <div>
        我是父子组件之间同步的数据{{data}}
// 父组件传递给子组件title属性(默认使用value)
// 通过update:title(默认使用update:value) 方法将子组件传递的值赋值给data
        <child v-model:title = data></child>
    </div>
</template>
<script>
    data(){
      return {
        data:'我是来自父组件的数据'
      }
    }
</script>

//子组件
<template>
  <div>
    <button @input="childDataChange">{{title}}</button>
  </div>
</template>
 
<script>
    props:{
      title:{
        default:'',
        type:String
      }
    },
    methods:{
      childDataChange(v){
        this.$emit('update:title',v) // 触发update:data将子组件值传递给父组件
      }
    }
</script>

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

//父组件
<template>
    <div>
        <child v-model:value1='dValue1' v-model:value2='dValue2'></child>
        // 等价于 默认给子组件传递两个值value1、value2
        // 子组件更新函数update:value1将接受到的参数赋值给dValue1
        // 子组件更新函数update:value2将接受到的参数赋值给dValue2
        <child :value1='dValue1' @update:value1='val=>{ dValue1= val }'
               :value2='dValue2' @update:value1='val=>{ dValue2= val }'
        ></child>
    <div/>
</template>
<script>
data() {
      return {
        dValue1: '父组件的数据1',
        dValue2: '父组件的数据2' 
      }
    }
</script>