- A+
所属分类:Web前端
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>