vue3使用v-model控制子组件进行双向数据绑定

vue2写法:

中父组件调用子组件:

子组件想要消失, 在子组件写:

this.$emit("update:isShow",false);

具体代码就不粘贴了

vue3写法: 

父组件核心代码:

v-model:a="xxx"

子组件核心代码:

defineProps({
  a: 数据类型, // 父页面传递的数据
});

interface IEmits {
  (e: 'update:a', arg1: 数据类型): void;
}

const emits = defineEmits();

调用父组件的方法:
emits("update:isShow", false);
 

使用示例:

注意: v-model:isShow="isShow" 如果拆开写就是   @update:isShow="bol=>isShow=bol"  :isShow="isShow"

父组件代码如下:

子组件逻辑:

因为 v-model:isShow="isShow" 如果拆开写就是   @update:isShow="bol=>isShow=bol"  :isShow="isShow"

所以:

defineProps({
  isShow: Boolean
});

const hide = () => {
  emits("update:isShow", false);
}

子组件代码如下: