【vue3】vue3在单个组件实例上创建多个v-model 绑定

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。正因为可以修改名称，vue3支持在单个组件上，绑定多个不同名字的v-model，来看示例。

父组件index.vue：

<script lang="ts">
import { ref } from "vue"
import ModelTest from './modelTest.vue'
export default {
    components:{ModelTest},
    setup(){
        const defaultName = ref("jack")
        const firstName = ref("hello")
        const lastName = ref("HELLO")
        return {
            defaultName,
            firstName,
            lastName
        }
    },
}
</script>
<template>
    <div>
        <div>{{defaultName}}</div>
        <div>{{firstName}}</div>
        <div>{{lastName}}</div>
        <ModelTest 
	        v-model="defaultName" 
	        v-model:firstName="firstName" 
	        v-model:lastName="lastName">
        </ModelTest>
    </div>
</template>

子组件，modelTest.vue：

<script lang="ts">
interface Data {
  [key: string]: unknown
}

interface eventData {
    target:{
        value:string
    }
}

interface SetupContext {
  attrs: Data
  emit: (event: string, ...args: unknown[]) => void
}
export default {
    props:{
        firstName:String,
        lastName:String,
        modelValue:String,//modelValue就是不带名字的默认v-model,触发修改用emit("update:modelValue")
    },
    setup(props:Data,{emit}:SetupContext){

        const changDefaultName = (val:eventData)=>{
            //TODO
            emit("update:modelValue",val.target.value)
        }

        const changFirstName = (val:eventData)=>{
            //TODO
            emit("update:firstName",val.target.value)
        }

        const changLastName = (val:eventData)=>{
            //TODO
            emit("update:lastName",val.target.value)
        }

        return {
            changDefaultName,
            changFirstName,
            changLastName
        }
    }
}
</script>
<template>
    <div>
        <input type="text" :value="modelValue" @input="changDefaultName">
        <input type="text" :value="firstName" @input="changFirstName">
        <input type="text" :value="lastName" @input="changLastName">
    </div>
</template>

在上边的子组件中，我们在setup中使用emit触发状态改变，如果不需要在子组件做其他操作，只需要修改数据，那么可以直接在模板里触发emit：

<template>
    <div>
        <input 
	        type="text" 
	        :value="modelValue" 
	        @input="$emit('update:modelValue', $event.target.value)">
        <input 
	        type="text" 
	        :value="firstName"
	        @input="$emit('update:firstName', $event.target.value)">
        <input 
	        type="text" 
	        :value="lastName" 
	        @input="$emit('update:lastName', $event.target.value)">
    </div>
</template>

有帮助的话，点个赞呗！关于vue3的一切疑问，大家可以在评论区留言提问。

上一篇：js发布-订阅模式（观察者模式）
下一篇：读vue3源码和vue3设计与实现，用Proxy实现简单的响应式