vue3 v-model方式修改父组件内部得值，自定义修饰符

vue中数据数据流向

vue中数据流向是单向的，也就是说我们不能直接修改props中的值所以我们都会

<template>
    <div>
        <Renderer :data='data' @updateValue='updateValue'/>
    </div>
</template>
<script setup>
	我这里使用unplugin-auto-import所以不必导入ref
    import  Renderer from  "./components/Render.vue"
    let  data = ref('0');
    这样的方式修改父组件给我们传递的值
    const  updateValue = (value) =>{
		data.value = value;
	}
</script>

<template>
    <div>
        <input type="text" v-model="content" @input="loadValue ">
    </div>
</template>

<script setup>
	const  emit =  defineEmits();
	let  content =  ref('');
	const  loadValue = () => {
		emit('updateValue', content.value);
	}
</script>

因为这中操作太频繁了所以vue新增v-model:data='data‘这种方式修改父组件数据

<template>
    <div>
    	 第一个data是，如果需要修改，修改当前组件的那个值
        <Renderer v-model:data="data"/>
    </div>
</template>

<script setup>
    import  Renderer from  "./components/Render.vue"
    let  data = ref('0');
</script>

<template>
    <div>
        <input type="text" v-model="content" @input="updateValue">
    </div>
</template>

<script setup>
	let  content = ref('');
	const  emit =  defineEmits();
	const  updateValue = ()=>{
	emit('update:data', content.value);
	}
</script>

现在v-model可以自定义修饰符

	//vue2提供的修饰符
	v-model.trim(去掉两端空格)
	v-model.number(只输入number)
	v-model.lazy(change事件触发)

<template>
    <div>
        <Renderer v-model:data.capitalize="data"/>
        {{data}}
    </div>
</template>

<script setup>
    import  Renderer from  "./components/Render.vue"
    let  data = ref('0');
</script>

<template>
    <div>
        <input type="text" v-model="content" @input="updateValue" />
    </div>
</template>

<script setup>
const props = defineProps({
    dataModifiers: Object
});
let content = ref('');
const emit = defineEmits();
const updateValue = () => {
    if (props.dataModifiers.capitalize) {
         content.value = content.value.charAt(0).toUpperCase() +  content.value.slice(1)
    }
    emit('update:data', content.value);
}
</script>