表单数据传递及双向绑定

LeeyyG

已于 2023-12-22 10:20:36 修改

阅读量454

点赞数 10

文章标签： javascript 前端服务器

于 2023-12-21 22:06:33 首次发布

本文链接：https://blog.csdn.net/weixin_46118142/article/details/135139282

版权

之前不理解为什么queryForm里面要塞进很多字段名，一开始也不知道有没有用就都塞进去，但是后面又发现了一些没需要塞字段也能使用的form表单。

      // 表单查询
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        id: "",
        projectName: "", // 项目名称
        projectType: "", //项目类型
        projectLabel: "", //项目标签
        ownerUnit: "", //业主单位
        buildUnit: "", //承建单位
        constructionLocation: "", //建设地点
        // 计划开工时间范围
        planWorkingTimeFrom:"",
        planWorkingTimeTo:"",
        // 计划竣工时间范围
        planEndingTimeFrom:"",
        planEndingTimeTo: "",
        // 分配状态
        ifAllocate: "",
        // 审核状态
        auditStatus: "",
        type: null, //新增状态提醒字段用于区别提醒信息
      },
      //对话框表单参数
      form: {},

queryParams和form都是用来给接口传递数据的表单，区别就在他们的用途和结构

1.queryParams是一个对象，用于存储查询参数。这些参数通常用于API请求，使得服务器根据这些参数过滤和返回相应的数据，queryParams表单就是用来传递这些查询参数的

2.form是一个对象，用于存储表单数据，这些数据常用于用户界面（UI）中的表单元素，如输入框、下拉菜单等，通常用于其他操作，如添加，删除，编辑等，然后用户像接口传递Json或其他类型的数据。form表单中的字段可能不需要填写，而是通过js动态生成或填充。

为什么form不需要填写字段，而queryForm需要填写字段呢？这是因为它们的使用场景和目的不同。在查询操作中，我们需要明确告诉接口我们想要查询哪些数据，因此需要填写查询参数。而在其他操作中，我们可能不需要告诉接口具体的参数值，而是通过其他方式传递数据。

问题2：前面在data里已经写过一遍queryparams了，为什么在resetQuery函数里还要再写一遍字段，直接引用不行吗

queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        id: "",
        projectName: "", // 项目名称
        projectType: "", //项目类型
        projectLabel: "", //项目标签
        ownerUnit: "", //业主单位
        buildUnit: "", //承建单位
        constructionLocation: "", //建设地点
        // 计划开工时间范围
        planWorkingTimeFrom:"",
        planWorkingTimeTo:"",
        // 计划竣工时间范围
        planEndingTimeFrom:"",
        planEndingTimeTo: "",
        // 分配状态
        ifAllocate: "",
        // 审核状态
        auditStatus: "",
        type: null, //新增状态提醒字段用于区别提醒信息
      },

resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        id: "",
        projectName: "", // 项目名称
        projectType: "", //项目类型
        projectLabel: "", //项目标签
        ownerUnitName: "", //业主单位
        buildUnit: "", //承建单位
        projectProcess: "", //项目进展
        constructionLocation: "", //建设地点
        // planWorkingTime: "", //计划开工时间
        // planEndingTime: "", //计划竣工时间
        deptNameList: null, //分配大队名称
      };
      this.planWorkingTime=null, //计划开工时间区间
           this.planEndingTime=null, //计划竣工时间区间
      this.search = null;
      this.getList();
    },

在vue中，data（）函数是用于初始化组件的数据，在函数中定义的查询参数是一个对象

resetQuery函数则是一个用于查询参数的函数，需要将查询参数重置为默认值，直接引用已经定义过的查询参数可能会导致函数无法正确的重置查询参数。如果resetQuery函数需要重置该对象中的某些属性，直接引用可能会导致对象的其他属性也被重置。因此，为了确保只重置需要的属性，最好在resetQuery函数中重新定义查询参数。

vue.js的数据双向绑定

这个特性允许（DOM）和数据之间保持同步。在数据发生变化时，视图会自动更新；同样，视图变化时数据也会自动更新。

在vue中，当一个数据和视图绑定时，vue会为这个数据创建一个watcher，这个watcher会监听这个数据的变化，当数据改变时，watcher会通知vue更新视图。这种更新机制需要在组件中手动触发数据的更新。

在vue中，使用getter方法返回数据对象，setter方法接收一个参数并更新数据对象