关于vue3 的v-model

 

• 语法糖与双向绑定：‌在Vue 2和Vue 3中，‌v-model都是用于实现父子组件数据双向绑定的语法糖。‌然而，‌Vue 3中的v-model引入了一些重要的改进，‌使其更具可定制性和可扩展性。‌在Vue 2中，‌一个组件上只能有一个v-model，‌而.sync修饰符可以有很多个，‌用于实现父子组件数据之间的双向绑定。‌相比之下，‌Vue 3中的v-model默认绑定的属性名为modelValue，‌默认绑定的事件名为update。‌这意味着在Vue 3中，‌我们可以自定义v-model绑定的名称，‌并且可以在一个v-model指令中同时使用多个修饰符，‌提供了更大的灵活性。‌

•  

  修饰符的使用：‌在Vue 2中，‌.sync修饰符可以用于实现父子组件之间的双向数据绑定，‌而v-model背后是value属性和input事件。‌在Vue 3中，‌v-model可以被使用多次，‌并且支持自定义模型修饰符，‌允许开发者更好地适应不同的输入组件类型。‌此外，‌Vue 3中的v-model可以接受一个参数，‌用于将数据绑定到组件的指定属性上，‌进一步增加了其灵活性和可定制性。‌

•  

  使用原理：‌Vue 3中的v-model默认绑定的属性名为modelValue，‌默认绑定的事件名为update。‌这意味着在Vue 3的组件中，‌我们需要监听update事件，‌并在该事件触发时更新modelValue的值。‌这种设计使得v-model在Vue 3中更加灵活和可扩展，‌能够更好地适应各种复杂的应用场景。‌

一、模式一

     1.组件单个v-model

         在<script setup> </script> 中需要声明    const modelValue = defineModel()；通过emit中的'update:modelValue'更新就可以了

<template>
	<view @click="change">
		{{modelValue}}
	</view>
</template>

<script setup>
import { ref } from 'vue';
const modelValue = defineModel()
const $emit = defineEmits(['update:modelValue'])
const change = ()=>{
	$emit('update:modelValue',modelValue.value+1)
}
</script>

   使用点击后数字会更改

<template>
	<view>
	    <testletVue v-model="cont"></testletVue>
	</view>
</template>

<script>
	import { ref,onMounted} from 'vue'
	import testletVue from '../../components/testlet.vue';
	export default {
		components:{
			testletVue
		},
		setup(){
			const cont = ref(10)
			return {
				cont
			}
		}
	}
</script>

    2.组件多v-mode

<template>
	<view >
		<view @click="change">{{modelValue}}</view> 
		<view @click="a">{{name}}</view>
	</view>
	
	
</template>

<script setup>
import { ref } from 'vue';
const modelValue = defineModel('modelValue');
const name = defineModel('name');
const $emit = defineEmits(['update:modelValue','update:name'])
const change = ()=>{
	$emit('update:modelValue',modelValue.value+1)
}
const a = ()=>{
	$emit('update:name',name.value+1)
}

</script>

 使用两个v-model

<template>
	<view>
		<testletVue 
		 v-model="cont"
		v-model:name="cont2"
		></testletVue>
	</view>
</template>

<script>
	import { ref,onMounted} from 'vue'
	import testletVue from '../../components/testlet.vue';
	export default {
		components:{
			testletVue
		},
		setup(){
			const cont = ref(10)
			const cont2 = ref(1)
			return {
				cont,
                cont2
			}
		}
	}
</script>

二、模式二

        1.单个v-model

            在<script>
                  export default{
                     setup(props, context) {
                        return{
                        }
                     }
                 }
                </script>

模式下是需要添加props 传参，使用方式和上面的一样 
多v-model 添加props传参和emits里面的事件就可以，使用和上面一样

<template>
	<view>
		<view class="" @click="change">
			{{modelValue}}
		</view>
	</view>
</template>

<script>
	import { ref } from "vue"
	export default{
		props:{
			modelValue:{
				type:[String,Number,Boolean]
			}
		},
		emits:['update:modelValue'],
		setup(props, context) {
			const change = ()=>{
				context.emit('update:modelValue',props.modelValue+1)
			}
			
			return{
				change
			}
		}
	}
</script>