1、子组件可以无需使用事件，直接通过this.$emit('update:modelValue', newValue) 修改父组件的数据
前置条件：
(1).父组件通过 v-model 绑定自身数据（可传递给子组件）
(2).子组件通过props中的 'modelValue' 来接收数据
(3).子组件通过this.$emit('update:modelValue', newValue) 方法来更新父组件的数据
① v-model绑定1条数据时
代码如下：
//父组件
const app = Vue.createApp({template: `<counter v-model="count"/>`,data() {return {count: 'aaa'}}
});//子组件
app.component('counter', {props: {'modelValue': String},methods: {handleClickCount() {this.$emit('update:modelValue', this.modelValue+'b');}},template: `<div @click="handleClickCount">{{modelValue}}</div>`
})const vm = app.mount('#root');绑1条数据时子组件必须使用modelValue来接收
②v-model绑定多条数据时，须给每条数据起一个别名
代码如下：
//父组件
const app = Vue.createApp({template: `<counter v-model:aliasone="count" v-model:aliastwo="city"/>`,data() {return {count: 'aaa',city:'北京'}}
});
//子组件
app.component('counter', {props: {'aliasone': String,'aliastwo': String,},methods: {handleClickCount() {this.$emit('update:aliasone', this.aliasone+'b');},handleClickCity() {this.$emit('update:aliastwo', this.aliastwo+"c");},},template: `<div @click="handleClickCount">{{aliasone}}</div><div @click="handleClickCity">{{aliastwo}}</div>`});const vm = app.mount('#root');2、v-model 之 修饰符
（1）v-model 系统自带的修饰符：lazy，number，trim
lazy：文本框失去焦点时更新数据变化
number：将文本框输入的数据类型转化成数值型
trim：清除文本框中字符串前后的空格
注：v-model 仅限在form表单中使用系统自带的修饰符
（2）v-model自定义修饰符
非form表单使用v-model后的自定义修饰符
①父组件 v-model 加自定义修饰符 uppercase
<counter v-model.uppercase="count"/>②子组件props中modelModifiers ：指传递过来的修饰符，默认名称不可更改
props: {'modelValue': String,'modelModifiers': {default: ()=> ({})}
}// 该实例modelModifiers返回的值为{uppercase: true}，如v-model后无修饰符，则返回{}
③可以结合修饰符对参数做处理
methods: {handleClickCount() {let newValue = this.modelValue + 'b';if(this.modelModifiers.uppercase) {newValue = newValue.replace('a','A')}this.$emit('update:modelValue', newValue);}
}整体代码如下（点击a时向后添加b并将a首字母大写）：
<script>const app = Vue.createApp({template: `<counter v-model.uppercase="count"/>`,data() {return {count: 'a',}}});//定义全局组件app.component('counter', {props: {'modelValue': String,'modelModifiers': {default: ()=> ({})}},methods: {handleClickCount() {let newValue = this.modelValue + 'b';if(this.modelModifiers.uppercase) {newValue = newValue.replace('a','A')}this.$emit('update:modelValue', newValue);}},template: `<div @click="handleClickCount">{{modelValue}}</div>`});const vm = app.mount('#root');
</script>
)
