绑定单个数据

调用组件的时候，使用v-model:变量名='变量名'传递给子组件 子组件使用props接收，并使用emit更新这个数据 父组件

<template>
  <div>
     <LocalComponent v-model:modelValue="email">
        
     </LocalComponent>
     子组件输入的值{{ email }}
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import LocalComponent from "../components/component/LocalComponent.vue";

let email = ref('');
</script>

子组件

<template>
    <div>
        <input :value="modelValue" @input="handleInput"/>
    </div>
</template>
<script lang="ts" setup>
import { defineEmits,defineProps} from 'vue';

const props = defineProps({
    modelValue:String,
})

const emit = defineEmits(['update:modelValue']);

const handleInput = (e:KeyboardEvent) => {
    let newVal = (e.target as HTMLInputElement).value;
    emit('update:modelValue',newVal);
}
</script>

输入前：

输入后：

绑定多个值

使用对象

父组件

<template>
  <div>
     <LocalComponent v-model:modelValue="person">
        
     </LocalComponent>
     子组件输入的姓名{{ person.name }}<br />
     子组件输入的年龄{{ person.age }}

  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import LocalComponent from "../components/component/LocalComponent.vue";

let person = reactive({
  name:'jack',
  age:12,
})
</script>

子组件

<template>
    <div>
        <input v-model="person.name"/>
        <br />
        <input v-model="person.age"/>
    </div>
</template>
<script lang="ts" setup>
import { defineEmits,defineProps, ref, watchEffect} from 'vue';

const props = defineProps({
    modelValue:Object,
})

const person = ref(props.modelValue);

const emit = defineEmits(['update:modelValue']);

watchEffect(() => {
    emit('update:modelValue',person.value);
})
</script>

如下图：

使用多个v-model

父组件

<template>
  <div>
     <LocalComponent v-model:name="name" v-model:age="age">
        
     </LocalComponent>
     子组件输入的姓名{{ name }}<br />
     子组件输入的年龄{{ age }}

  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import LocalComponent from "../components/component/LocalComponent.vue";

let name = ref('jack');
let age = ref(11);
</script>

子组件

<template>
    <div>
        <input v-model="name"/>
        <br />
        <input v-model="age"/>
    </div>
</template>
<script lang="ts" setup>
import { defineEmits,defineProps, ref, watchEffect} from 'vue';

const props = defineProps(['name','age']);

let name = ref(props.name);
let age = ref(props.age);

const emit = defineEmits(['update:name','update:age']);

watchEffect(() => {
    emit('update:name',name.value);
    emit('update:age',age.value);
})
</script>

如下图：