vue中关于表单的常用学习

vue中$refs, $childern, $parent, $root, $slots 的简单分析

$refs 用来获得ref命名的某个组件，可以操作数据和方法

$children 获得所有子组件，顺利不可靠

$parent 获得当前组件对应的父组件， **当子组件的数据依赖父组件，而子组件数据出来，父还没渲染好时候使用**

$root 获得根组件

$slots 获得插槽传递的数据(一般在父组件中，通过插入内容到组件中间)，一般用于子组件使用父组件的数据
1
2
3
4
5
6
7
8
9

插槽的使用

1. 默认： 父组件中插入内容，子组件通过包裹，当父组件没有内容时候，显示slot的内容

2. 具名： 父组件中通过 v-slot=“slot名称” 或 使用 #名称， 子组件中使用

3. 作用域：父组件使用属性 v-slot=“slotProps”–(自定义的名称), 子组件使用v-bind属性传值 (子传父)

vue组件间通信

子传父：
方法1：
子组件中定义触发条件和方法， this.$emit(“mytest”, 子组件需要传递的数据)
父组件中调用. 通过自身的test方法可以获得对应的数据

方法2：
   子组件使用ref命名，触发 this.$emit('mytest', 数据)
   父组件使用`this.refs.xx.$on('mytest', () => {})`
1
2
3

使用apiFox模拟前端数据

get 和 post 请求分析

参数分为三类

1. path – 路径参数 http://localhost:8080/api/{id} 即对应的id

2. query参数: 放在地址栏中直接传递，格式为 http://localhost:8080/api?username=zs&age=16

3. data参数： 放在body体中传递，只有post请求可以将数据传递给服务端

get请求可以使用query传递参数，而post请求可以使用query和data传递（分别对应的属性为params, 和data）

使用场景

get常向服务器请求数据，post常提交数据给服务器处理。
get只可以传递少量数据，通过query方式（利用params属性），在url中以拼接字符串的方式传递书，参数会在地址栏中直接显示存在安全问题；
post也可使用params传递参数（参数可见）, 也可以将参数放在body体中传递（参数不可见且数据量打）

post中传递参数的格式 – content-type

1. application/json 以json对象形式传递

2. application/x-www-form-urlencoded 以表单形式传递， username=zs&sex=male 默认的数据类型，但是在传输大型文件的时候效率低下

3. multipart/form-data 主体内则可以包含多部分对象，通常用来发送图片、文件或表单等，适用于传输大型文件。

apiPost中常用功能点总结

1. 根据请求不同的值，获得不同的请求结果 -------------- 高级mock中新建期望，配置参数的类型和取值；

2. 响应体中不同数据类型的复用 — 在响应体中设置名称，可以选择引用类型，找到对应的名称；在定义数据类型的时候，若要引用其他的名称要一致；

3. 分页设置，每次请求时为page=1, pagesize=120, — 在高级mock中可以设置脚本，右侧会有对应的提示代码，记得开启脚本按钮。

4. 设置好接口，需要保存，运行后，才可以直接使用；

5. 每个接口中，可以写多个测试用例，方便后期使用。

表单操作总结

1. 表单校验总结

场景：

在子组件中定义好表单，并通过rules设置好相应的规则，也可以通过data属性的定义中自定义校验规则，父组件中提供保存功能，点击保存会校验子组件中的数据，并获得校验成功后的数据。

解决方式：

// 子组件定义方法，传入callback，供父组件调用;  在子组件内部定义一个ref为ruleForm
validate(callback) {
    this.$refs.ruleForm(valid => {
        callback(valid, res);
    })
}

// 父组件中调用子组件的方法

    
    保存


save() {
    this.$refs.myform.validate((valid, res)) {
        if(valid) {
            this.xx = res
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. upload上传图片中oncahnge传参问题

  <el-input
        v-for="(ll, lindex) in item.optionArr"
        :key="lindex"
        placeholder="获取缩略图的基本信息"
        v-model="fileList[lindex].name"
>
    <el-upload
        slot="suffix"
        action="#"
        :on-change="(file, fileList) => { handleChange(file, fileList, lindex)}"  // 注意这里使用了箭头函数传参，在函数定义后面加入的
        :file-list="fileList"
        :show-file-list="false"
        >
    <i class="el-input__icon el-icon-plus"></i>
    </el-upload>
</el-input>


handleChange(file, fileList, index) {
    // 初始值 fileList= [{url:'xx', name: 'xx'}, {....}]
    this.fileList[index].name = file.name
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

表单的封装 (仅供后期参考)

  <el-form
    class="form"
    ref="formModule"
    :rules="rules"
    :model="formModule"
    v-bind="elFormAttrs"
  >
    <div v-for="formItem in formItemConfigArr" :key="formItem.title">  // formItemConfigArr是自定义好的表单的数据文件，标明属性，tilte，表单类型，rules等
      <div class="title">
        <div class="img-box">
          <img :src="formItem.icon" alt="" />
        </div>
        <span> {{ formItem.title }}</span>
      </div>
      <div class="formContainer">
        <el-form-item
          style="margin-right: 0; margin-bottom: 0; display: flex"
          class="myitem"
          v-for="(item, index) in formItem.formArr"
          :key="`${item.prop}-${index}`"
          :prop="`${formItem.prop}.${item.prop}`"  // 这里是重点， prop应该是需要校验的属性
          :rules="item.rules"
          :label="`${item.label}：`"
        >
          <el-input
            style="width: 358px"
            v-if="item.itemType === 'input'"
            v-model="formModule[formItem.prop][item.prop]"
          >
          </el-input>
        </el-form-item>
      </div>
    </div>
  </el-form>




// data部分的数据格式
data() {
	var validate = (rule, value, callback) => {  // 自定义校验规则
      if (
        +new Date(value) < +new Date(this.formModule.bb.b)
      ) {
        callback(new Error("xxxx"));
      } else {
        callback();
      }
    };
	return {
		formData: {
			a: {
					aa: 'xxx'
				},
			b: {
					bb： ’yyyy‘
				}
		},
		rules:  {
		// 类似这样的
			 a: {
		          aa: [
		            {
		              validator: validateCertValidTime,
		              trigger: "blur",
		            },
	          ],
        },
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

表单的封装告一段落，继续学习，继续总结