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>
1
2
3
4
5
6
7
8
9
10
11
12

HelloWorld.vue

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

<script setup>
defineProps(["modelValue"]);
defineEmits(["update:modelValue"]);
</script>
1
2
3
4
5
6
7
8
9
10

多个输入框传值,一个组件接受多个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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5
6
7
8
9
10
11
12
13