v-model+computed实现父子组件数据传递和同步

1. 父组件

<template><div><span>父子组件传值：{{countRef}}<my-counter v-model='count'></my-counter></span></div>
</template>
<script setup>
import { ref } from 'vue'
import MyCount from '@/views/passValue/MyCounter.vue'
const count = ref(0)
</script><style scoped></style>

2. 子组件

<template><div><input type="text" v-model="value"/></div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({count:{type:Number}
})
const emit = defineEmits(['update:modelValue'])
const value = computed(()=>{get(){return props.modelValue},set(val){emit("update:modelValue",val)}
})
</script><style scoped></style>

说明

1. 父组件:
   在模板中，父组件使用 v-model 将 count传递给子组件。
   count是父组件的一个响应式数据，初始化为 “初始值”。
2. 子组件:
   子组件通过 props 接收父组件传来的 modelValue。
   使用 computed 属性 modelValue来管理这个 modelValue。在 get 方法中，它返回接收到的值，而在 set 方法中，使用 $emit 报告父组件值的变化。
3. 双向绑定:
   通过这种方式，父组件和子组件之间实现了双向绑定：当子组件的输入框内容改变时，父组件的 parentValue 会更新；当父组件的 parentValue 改变时，子组件的输入框也会自动显示新的值。

总结

使用 v-model 和 computed 可以有效地实现父子组件之间的数据传递和同步