组件中的v-model

Vue2

在表单中，v-model是基于表单控件的value属性和input事件实现的

在组件中，v-model父传子是prop实现，子传父是通过$emit('input')实现的

当组件中使用v-model时，会自动绑定一个@input事件

<Child v-model="num"/>

相当于传递了一个名为value的prop，添加了一个input事件

<Child :value="num" @input="(v)=> num = v"/>

那么我们在子组件中就可以使用$emit('input',value)把数据传递给父组件

如下所示

Father.vue

<template>
	<Stars v-model="value"></Stars>
</template>
<script>
    export default {
        components: {
            Stars: () => import('./views/Stars.vue'),
        },
        data() {
            return {
                value: 0,
            }
        },
    }
</script>

Child.vue

<template>
	<div>
		{{ value }}
		<button @click="$emit('input', value + 1)">add</button>
	</div>
</template>

<script>
export default {
	props: {
		value: Number,
	},
}
</script>

Vue3

vue3中在一个组件中使用V-model

<Child v-model="text" />

相当于传递了一个名为modelValue的prop，和一个update:modelValue自定义事件

<Child
  :modelValue="text"
  @update:modelValue="$event => (text = $event)"
/>

子组件可以调用update:modelValue方法传值

<input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" />