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>