Vue子组件给父组件传值以及sync语法糖使用

不使用sync语法糖

父组件

<drawPlanInfoDialog
  :drawPlanInfoDialogVisible="drawPlanInfoDialogVisible"
  @update:drawPlanInfoDialogVisible="closeDialog">
</drawPlanInfoDialog>

export default {
	method: {
        closeDialog(newVal) {
          this.drawPlanInfoDialogVisible = newVal;
        },
	}
}

子组件

<el-dialog
  :visible="drawPlanInfoDialogVisible"
  :before-close="closeDialog"
>
</el-dialog>

export default {
	method: {
        closeDialog() {
          // 通知父组件 子组件对话框关闭了 让父组件更新drawPlanInfoDialogVisible的值为false
          this.$emit("update:drawPlanInfoDialogVisible", false);
        },
	}
}

使用sync语法

父组件

<drawPlanInfoDialog
  :drawPlanInfoDialogVisible.sync="drawPlanInfoDialogVisible">
</drawPlanInfoDialog>

子组件

同上

总结：
在属性后使用sync后缀，可以给你扩展为
@update:drawPlanInfoDialogVisible=“newVal => drawPlanInfoDialogVisible = newVal”
优点：比较简洁美观，并且可以实现父子组件数据同步
缺点：不方便理解，可读性低