在组件上使用v-model

意义

提升组件使用的方便性，不用在子组件传值给父组件，也不用再父组件做事件监听

场景

把子组件内部操作的结果绑定给父组件的data，可以是单向的，也可以是双向的（父组件的data值给子组件某个位置回写上）

关键代码

vue2：value、input
vue3：modelValue、update:modelValue

// 子组件中：
<div class="customInput">
	<input :value="modelValue" @input="inputChange">
<script setup>
const {modelValue} = defineProps(['modelValue'])
const $emit = defineEmit(['update:modelValue'])
const inputChange = (e)=> {
	$emit('update:modelValue', e.target.value)
}
// 父组件中
<Son v-model='msg'>
<script setup>
const msg = ref('')

v-mode的参数

// 子组件中：
defineProps(['value1','value2'])
const $emit = defineEmit(['update:value1','update:value2'])
// 父组件中
<Son v-model:value1='msg1' v-mode:value2='msg2'>

自定义v-model修饰符（添加个性逻辑）

// 子组件中：
// 以对象的形式定义属性，如果使用的是默认值modelValue，对应的修饰符属性名为modelModifiers
// 配合参数使用，如果prop名为value1，对应的修饰符属性名为value1Modifiers
const props = defineProps({
	modelValue: String,
	modelModifiers: {
		default: () =>({})
	}
})
const $emit = defineEmit(['update:modelValue'])
const inputChange = (e)=> {
	// 定义修饰符xxx的逻辑
	if(props.modelModifiers.xxx){
		$emit('update:modelValue', e.target.value)
	}
}
// 父组件中
<Son v-model.xxx='msg'>

绑定计算属性

如果v-model绑定的是计算属性，那么就要设置这个计算属性的set