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

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>