vue3通过v-model实现父子组件通信

单一值传递 父组件 <template> <div > <h1>v-model实现父子组件通讯</h1> <hr> <child1 v-model="num"></child1> <!-- 上下两个是等价的 --> <child1 :modelValue="num" @update:modelValue="handle"></child1> </div> </template> <script setup> import {ref} from 'vue' import child1 from './child1.vue'; let num = ref(0); const handle =(value)=> { num.value = value } </script> 子组件 <template> <div> <h1>我是子组件</h1> <!-- 父组件传过来的值 --> <h3>{{ modelValue }}</h3> <button @click="$emit('update:modelValue', modelValue+1)">修改父组件的值</button> </div> </template> <script setup> let props = defineProps(['modelValue']) const $emit = defineEmits(['update:modelValue']) </script>

多个v-model实现父子组件传值 父组件 <template> <div > <h1>v-model实现父子组件通讯</h1> <hr> <child1 v-model:firstnum="num1" v-model:secondnum="num2"></child1> </div> </template> <script setup> import {ref} from 'vue' import child1 from './child1.vue'; let num1 = ref(0); let num2 = ref(0); </script> <style lang="scss" scoped></style> 子组件 <template> <div> <h1>我是子组件</h1> <!-- 父组件传过来的值1 --> <h3>{{ firstnum }}</h3> <!-- 父组件传过来的值2 --> <h3>{{ secondnum }}</h3> <button @click="handler">修改父组件的值</button> </div> </template> <script setup> let props = defineProps(['firstnum', 'secondnum']) const $emit = defineEmits(['update:firstnum', 'update:secondnum']) const handler = () => { $emit('update:firstnum', props.firstnum+1) $emit('update:secondnum', props.secondnum+4) } </script>