我们在写项目的时候，经常自定义组件，并且需要传参，刚好v-model是一个双向绑定，所以我们会把v-model的思想使用到各个自定义组件中

在vue2.0中，v-model只能对应一个变量

在vue3.0中，在v-model原来的使用基础上，拓展了多对多的使用方式

---

1.vue2.0 

父组件引入子组件hello，并且传参给子组件，代码如下：

<template>

  <div class="home">

    <h1>{{username}}</h1>

    <hello v-model="username"></hello>

  </div>

</template>

<script>

import hello from "@/components/HelloWorld.vue";

export default {

  components:{hello},

  data(){

    return{

      username:'小明',

    }

  },

};

</script>

子组件定义一个input，用来接收父组件的参数，并且实现数据双向绑定，代码如下：

<template>

  <div class="hello">

    <input :value="value" @input="inputChange"/>

  </div>

</template>

<script>

export default {

  props:['value'],

  methods:{

    inputChange(e){

      this.$emit('input',e.target.value);

    }

  },

}

</script>

2.vue3.0

父组件引用子组件hello，并且使用v-model给子组件传递三个参数，并且同时实现这三个参数双向绑定 

父组件代码如下：

<template>

  <div class="home">

    <h1> {{username}}</h1>

    <h1> {{age}}</h1>

    <h1> {{score}}</h1>

    <hello v-model:username="username" v-model:age="age" v-model:score="score"></hello>

  </div>

</template>

<script>

import Vue from "vue";

import hello from "@/components/HelloWorld.vue";

export default {

  components:{hello},

  data(){

    return{

      username:'小明',

      age:18,

      score:87,

    }

  },

};

</script>

子组件代码如下：

<template>

  <div class="hello">

    <input :value="username" @input="changeInput($event,'username')"/>

    <input :value="age" @input="changeInput($event,'age')"/>

    <input :value="score" @input="changeInput($event,'score')"/>

  </div>

</template>

<script>

export default {

  props:['username','age','score'],

  methods:{

    changeInput(e,type){

      this.$emit('update:'+type,e.target.value);

    },

  },

}

</script>