1.vue3.4之前是通过defineProps和defineEmits来实现组件双向绑定
子组件:通过 defineEmits 定义了一个自定义事件update:modelValue
,当输出发close方法时,它会通过这个事件向父组件传递新的值。父组件中的这个方法会自动处理这些事件。
父组件:
最初这个组件只能执行一次只有第一次点击时可打开对话框因为子组件对话框绑定用的:model-value这个是因为props.visible是父组件穿过来的是只读的不可修改,v-model是双向绑定会对绑定值进行修改所以不可用v-model,此时只能打开一次是因为把弹出的对话框关掉后没有改变visible的值visible一直为true,可通过父组件穿@close方法改变visible的值解决,也可通过defineprops和defineEmit实现组件的双向绑定来解决。
2.vue 3.4版本之后是采用defineModel() 来解决组件的双向绑定的
子组件:通过defineModel()进行定义,双方通过v-model绑定,自定义一个选择物料在库的方法当双击选中物料那一行时触发这个方法通知父组件并将选择的数据传到父组件
父组件: