vue3.x初探之v-model的详细使用

  • A+
所属分类:Web前端
摘要

2.x移除了model配置,3.x那又该怎么配置其他prop呢?非自定义组件中,v-model除了.sync以外,其他依然还是可以使用的,比如:.lazy、.trim等


1、用于自定义组件时,v-model的prop和默认事件名更改了,并且移除了model选项

//父组件 <template>   <div>     <Child v-model="message" />     <div>绑定的值:{{message}}</div>   </div> </template>   //子组件 <template>   <div>     <input        type="text"        :value="modelValue"        @input="$emit('update:modelValue', $event.target.value)"     >   </div> </template> <script> export default {   //2.x用法,可以修改prop和触发的事件名称,model以废弃   // model: {   //   prop: 'value', //3.x默认值改为了modelValue   //   event: 'input' //3.x默认值改为了update:modelValue   // },   props:['modelValue'] } </script> 

2.x移除了model配置,3.x那又该怎么配置其他prop呢?

//父组件 <template>   <div>     <Child v-model:text="message" />     <div>绑定的值:{{message}}</div>   </div> </template>  //子组件 <template>   <div>     <input        type="text"        :value="text"        @input="$emit('update:text', $event.target.value)"     >   </div> </template> <script> export default {   //3.x 接收v-model冒号后面的值,相应的触发的方法改为update:text   props:['text'] } </script> 

2、3.x新增,可以定义多个v-model

//父组件 <template>   <div>     <Child        v-model="message1"       v-model:text="message2"      />     <div>绑定的值1:{{message1}}</div>     <div>绑定的值2:{{message2}}</div>   </div> </template>  //子组件 <template>   <div>     <input        type="text"        :value="modelValue"        @input="$emit('update:modelValue', $event.target.value)"     >     <input        type="text"        :value="text"        @input="$emit('update:text', $event.target.value)"     >   </div> </template> <script> export default {   //v-model冒号后面不写值,默认就是modelValue   props:['modelValue','text'] } </script> 

3、去掉了.sync 修饰符,新增自定义v-model修饰符

非自定义组件中,v-model除了.sync以外,其他依然还是可以使用的,比如:.lazy、.trim等

//父组件 <template>   <div>     <Child        v-model.toUpperCase="message1"        v-model:text.toLowerCase="message2"      />     <div>绑定输入的字母全为大写:{{message1}}</div>     <div>绑定输入的字母全为小写:{{message2}}</div>   </div> </template>  //子组件 <template>   <div>     <input        type="text"        :value="modelValue"        @input="handleInput1"     >     <input        type="text"        :value="text"        @input="handleInput2"     >   </div> </template> <script> export default {   props:['modelValue','modelModifiers','text','textModifiers'],   created(){     //对不带参数的v-model绑定,检查对象名称为:modelModifiers     //对于带prop参数的v-model绑定,检查对象名称为:prop + modelModifiers     console.log(this.modelModifiers); //{toUpperCase: true}     console.log(this.textModifiers); //{toLowerCase: true}   },   methods: {     handleInput1(e){       let value = e.target.value;       if(this.modelModifiers.toUpperCase){         value = value.toUpperCase();       }       this.$emit("update:modelValue", value)     },     handleInput2(e){       let value = e.target.value;       if(this.textModifiers.toLowerCase){         value = value.toLowerCase();       }       this.$emit("update:text", value)     }   } } </script>