Vue3 父子组件之间的双向数据绑定

双向绑定流程

• ​​父 → 子​​：父组件的 cateId通过 v-model传递给子组件的 modelValue
• ​​子 → 父​​：当选择变化时，子组件通过 emit触发 update:modelValue事件，更新父组件的 cateId
  1. 父组件部分
  <ChildComponent v-model="cateId" />
  使用 v-model实现父子组件双向绑定,cateId是父组件中的数据，将与子组件同步
  2. 子组件部分
  双向绑定实现

// (1). 接收父组件传递的值
defineProps({modelValue: {type: [Number, String], // 接受数字或字符串类型},
})

• defineProps接收父组件通过 v-model传递的值
• defineEmits定义更新事件，用于向父组件传值

//(2). 定义子组件向父组件发送事件的方法
const emit = defineEmits(['update:modelValue'])
------------------------------------
<ChildDom  :modelValue="modelValue" @update:modelValue="emit('update:modelValue', $event)"
/>