sync、native修饰符的使用

Yl郁

于 2022-03-28 19:30:13 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端开发语言

本文链接：https://blog.csdn.net/HiYulinlin/article/details/123803168

本文介绍如何使用Element-UI实现自定义表单校验功能，具体演示了如何根据当前部门ID查找所有子部门数据，并判断名称是否重复。同时介绍了.vue组件中.native和.sync修饰符的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui自定义表单校验：

表单校验--根据当前部门id，找到所有子部门相关的数据，判断是否重复

  const checkNameRepeat = async (rule, value, callback) => {
      // 先要获取最新的组织架构数据
      const { depts } = await getDepartments();
      // depts是所有的部门数据
      // 如何去找技术部所有的子节点
      const isRepeat = depts.filter((item) => item.pid === this.treeNode.id).some((item) => item.name === value);
      isRepeat ? callback(new Error(`同级部门下已经有${value}的部门了`)) : callback();
    };

.native修饰符：会将原生事件绑定到组件

<base-input @focus.native="onFocus"></base-input>

.sync修饰符:子父通信的语法糖

用法：

 //父组件
 <AddDept @addDepts='getDepartments' 
  :show-dialog.sync="showDialog" 
  :treeNode='node'/>
----------------------------------------
 //子组件
 this.$emit("update:showDialog",false);