v-model底层实现，案例演示

vue3中 v-model

首先我们要理解一个概念就是，子组件是不能直接修改父组件的值的，是通过调用父类的某个方法，让父组件去修改对应值。v-model相当于免去了要声明这么一个函数，vue自动帮我们修改。

声明一个父组件

<template>
    <div>父组件</div>
    <div class="temperature">温度：{{ temperature }}</div>
    <div class="humidity">湿度：{{ humidity }}</div>
    <button type="button" @click="temperature+=1">温度+1</button>
    <button type="button" @click="humidity+=1">湿度+1</button>
    <Son v-model="temperature" v-model:humidity="humidity"></Son>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Son from '@/components/son.vue'
const temperature = ref(0)
const humidity = ref(0)

</script>
<style scoped>

</style>
    

子组件

<template>
    <div>子组件</div>
    <div class="temperature">温度：{{ Prop.modelValue }}</div>
    <div class="humidity">湿度：{{ Prop.humidity }}</div>
    <button type="button" @click="emit('update:modelValue', Prop.modelValue+1)">温度+1</button>
    //当点击事件发生后 期望父组件的该变量改变的值 Prop.modelValue+1
    <button type="button" @click="emit('update:humidity',Prop.humidity+1)">湿度+1</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const Prop = defineProps(['modelValue','humidity'])
const emit = defineEmits(['update:modelValue','update:humidity'])
</script>
<style scoped>

</style>
    

可以实现父组件和子组件同时控制温度和湿度