因为需要正在熟悉vue3,所以根据官网vue3迁移指南中非兼容性改变中的说明看了之后自己写了一些案例方便自己对这些知识点的理解并记录下来。这里记录的是vue3之后v-model使用变化和相关例子。

v-model

概览

以下是对变化的总体概述：

• 1.非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：

  • prop：value -> modelValue；
  • 事件：input -> update:modelValue；

• 2.非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替；

• 3.新增：现在可以在同一个组件上使用多个 v-model 绑定；

• 4.新增：现在可以自定义 v-model 修饰符。

在这里官网是用父子组件来作为例子的，所以下面我也同样使用父子组件来用作例子，只是相较于官网有比较容易理解的代码和页面效果展示

父子组件，组件中使用一个v-model

下面是子组件就是有一个简单的输入框，父组件引用，可以印证上面第一点 prop 和事件默认名称已更改，界面关系以及页面效果如下图

childInput.vue 子组件

<template>
    <h2>单个v-model组件</h2>
    <!-- 第一点：用于自定义组件时，v-model prop 和事件默认名称已更改：
    prop：value -> modelValue；
    事件：input -> update:modelValue； -->
    <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)">
</template>
<script setup>
    import { defineProps } from 'vue';
    const props = defineProps({
        //子组件接收父组件传递过来的值
        modelValue:String,
    })
</script>

index.vue 父组件引用子组件

<template>
    <h2>单个model的:{{inputValue}}</h2>
    <childInput v-model="inputValue"></childInput>
</template>

<script setup>
    import childInput from './components/childInput.vue'
    import {ref} from 'vue'
    const inputValue = ref('')
</script>

v-model 参数 和 多个 v-model绑定案例

下面案例还是以父子组件为例，印证了上面第二第三点，分别是v-model参数和多个v-model绑定，效果图如下

子组件代码 childInputs.vue 子组件

<template>
    <h2>多个v-model组件</h2>
    <input type="text" :value="childInput1" @input="changeInput1">
    <input type="text" :value="childInput2" @input="$emit('update:childInput2',$event.target.value)">
    <input type="text" :value="childInput3" @input="$emit('update:childInput3',$event.target.value)">
</template>

<script setup>
    import { defineProps,defineEmits,ref } from 'vue';
    const emit = defineEmits(['update:childInput1'])
    const props = defineProps({
        //子组件接收父组件传递过来的值
        childInput1:String,
        childInput2:String,
        childInput3:String,
    })
    const changeInput1 = (val)=>{
        emit('update:childInput1', val.target.value);
    }
</script>

index.vue 父组件引用子组件

<template>
    <h2>inputValue1的值是:{{inputValue1}}</h2>
    <h2>inputValue2的值是:{{inputValue2}}</h2>
    <h2>inputValue3的值是:{{inputValue3}}</h2>
    <childInputs v-model:childInput1="inputValue1" v-model:childInput2="inputValue2" v-model:childInput3="inputValue3"></childInputs>
</template>
<script setup>
    import childInputs from './components/childInputs.vue'
    import {ref} from 'vue'
    const inputValue1 = ref('')
    const inputValue2 = ref('')
    const inputValue3 = ref('')
</script>

自定义组件的 v-model 支持自定义的修饰符

下面印证了上述第四点，自定义 v-model 修饰符。

子组件代码 modelModifier.vue 子组件

<template>
    <!-- v-model修饰词 -->
    <input type="text" :value="modelValue" @input="emitValue"
    />
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
    modelValue:String,
    modelModifiers:{
        default:()=>({})
    }
})

const emit = defineEmits(['update:modelValue'])
const emitValue = (e)=>{
    let value = e.target.value
    // 修饰词capitalize,首字母大写
    if(props.modelModifiers.capitalize){
        value = value.charAt(0).toUpperCase() + value.slice(1)
    }
    emit('update:modelValue',value)
}
</script>

index.vue 父组件引用子组件

<template>
    <h2>首字母大写 {{inputValue}}</h2>
    <modifierInput v-model.capitalize="inputValue"></modifierInput>
</template>

<script setup>
    import modifierInput from './components/modelModifier.vue'
    import {ref} from 'vue'
    const inputValue = ref('')
</script>

总结：其实官网组件V-model讲解也挺仔细的，这里主要是自己过了一遍熟悉一遍做个记录。