Vue3中使用v-model高级用法参数绑定传值

单个输入框传值

App.vue

<template><p>{{firstName}}</p><hello-world v-model="firstName"></hello-world>
</template><script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";const firstName = ref('firstName');</script>

HelloWorld.vue

<template><input type="text":value="modelValue"@input="$emit('update:modelValue',$event.target.value)">
</template><script setup>
defineProps(["modelValue"]);
defineEmits(["update:modelValue"]);
</script>

多个输入框传值,一个组件接受多个v-model值

App.vue

<template><p>{{firstName}}</p><p>{{lastName}}</p><hello-world v-model:firstName="firstName" v-model:lastName="lastName"></hello-world>
</template><script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";const firstName = ref('firstName');
const lastName = ref("lastName");</script>

HelloWorld.vue

<template><input type="text":value="firstName"@input="$emit('update:firstName',$event.target.value)"/><br/><input type="text":value="lastName"@input="$emit('update:lastName',$event.target.value)"/>
</template><script setup>
defineProps(["firstName","lastName"]);
defineEmits(["update:firstName","update:lastName"]);
</script>