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>