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

<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>

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

<script setup>
defineProps(["modelValue"]);
defineEmits(["update:modelValue"]);
</script>

<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>

<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>