（一）：vue3.x初探之v-model的详细使用

小鱼儿 2023-01-20 09:45 1阅读 0赞

### 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>

> 原文链接 ： https://www.cnblogs.com/sgs123/p/14188661.html