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 可以有效地实现父子组件之间的数据传递和同步