我们在写项目的时候，经常自定义组件，并且需要传参，刚好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>
