vue中$refs, $childern, $parent, $root, $slots 的简单分析
$refs 用来获得ref命名的某个组件,可以操作数据和方法
$children 获得所有子组件,顺利不可靠
$parent 获得当前组件对应的父组件, **当子组件的数据依赖父组件,而子组件数据出来,父还没渲染好时候使用**
$root 获得根组件
$slots 获得插槽传递的数据(一般在父组件中,通过插入内容到组件中间),一般用于子组件使用父组件的数据
插槽的使用
-
默认: 父组件中插入内容,子组件通过包裹,当父组件没有内容时候,显示slot的内容
-
具名: 父组件中通过 v-slot=“slot名称” 或 使用 #名称, 子组件中使用
-
作用域:父组件使用属性 v-slot=“slotProps”–(自定义的名称), 子组件使用v-bind属性传值 (子传父)
vue组件间通信
子传父:
方法1:
子组件中定义触发条件和方法, this.$emit(“mytest”, 子组件需要传递的数据)
父组件中调用. <Child @mytest=“test” /> 通过自身的test方法可以获得对应的数据
方法2:
子组件使用ref命名,触发 this.$emit('mytest', 数据)
父组件使用`this.refs.xx.$on('mytest', () => {})`
使用apiFox模拟前端数据
get 和 post 请求分析
参数分为三类
-
path – 路径参数
http://localhost:8080/api/{id}
即对应的id -
query参数: 放在地址栏中直接传递,格式为
http://localhost:8080/api?username=zs&age=16
-
data参数: 放在body体中传递,只有post请求可以将数据传递给服务端
get请求可以使用query传递参数,而post请求可以使用query和data传递(分别对应的属性为params, 和data)
使用场景
get常向服务器请求数据,post常提交数据给服务器处理。
get只可以传递少量数据,通过query方式(利用params属性),在url中以拼接字符串的方式传递书,参数会在地址栏中直接显示存在安全问题;
post也可使用params传递参数(参数可见), 也可以将参数放在body体中传递(参数不可见且数据量打)
post中传递参数的格式 – content-type
-
application/json 以json对象形式传递
-
application/x-www-form-urlencoded 以表单形式传递, username=zs&sex=male 默认的数据类型,但是在传输大型文件的时候效率低下
-
multipart/form-data 主体内则可以包含多部分对象,通常用来发送图片、文件或表单等,适用于传输大型文件。
apiPost中常用功能点总结
-
根据请求不同的值,获得不同的请求结果 -------------- 高级mock中新建期望,配置参数的类型和取值;
-
响应体中不同数据类型的复用 — 在响应体中设置名称,可以选择引用类型,找到对应的名称;在定义数据类型的时候,若要引用其他的名称要一致;
-
分页设置,每次请求时为page=1, pagesize=120, — 在高级mock中可以设置脚本,右侧会有对应的提示代码,记得开启脚本按钮。
-
设置好接口,需要保存,运行后,才可以直接使用;
-
每个接口中,可以写多个测试用例,方便后期使用。
表单操作总结
1. 表单校验总结
场景:
在子组件中定义好表单,并通过rules设置好相应的规则,也可以通过data属性的定义中自定义校验规则,父组件中提供保存功能,点击保存会校验子组件中的数据,并获得校验成功后的数据。
解决方式:
// 子组件定义方法,传入callback,供父组件调用; 在子组件内部定义一个ref为ruleForm
validate(callback) {
this.$refs.ruleForm(valid => {
callback(valid, res);
})
}
// 父组件中调用子组件的方法
<div>
<SubComponent ref="myform"/>
<el-button @click="save">保存</el-button>
</div>
save() {
this.$refs.myform.validate((valid, res)) {
if(valid) {
this.xx = res
}
}
}
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
}
表单的封装 (仅供后期参考)
<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",
},
],
},
}
}
}
表单的封装告一段落,继续学习,继续总结