vue3 父组件与子组件v-model双向绑定

父组件

<open-diolag
   v-model:name="openDiolagName"
   @close="onClose"
   @save="onSave"
 />
1
2
3
4
5

在名字前面加个v-model，

然后子组件代码：

interface Props {
  name: string;
}

const props = withDefaults(defineProps<Props>(), {
  name: '',
});

const emit = defineEmits(['update:name', 'close', 'save']);

const onSave = (val) => {
  emit('update:name', val);
};
1
2
3
4
5
6
7
8
9
10
11
12
13

vue3多了个update:的语法糖，用这样提交数据给父组件，可以实现双向绑定效果，父组件不用和以前一样再用@XXX来接受数据了