💨一 格式规范
在 register.vue 中对输入框的信息进行设置, 并传给子组件 input.vue.
<inputstyle :input\_data="input\_data[0]"></inputstyle>
export default {
...
input\_data: [
{
type: 'text',
name: 'email',
placeholder: '请输入邮箱',
state: 0,
reg: '^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9\_-]+(\.[a-zA-Z0-9\_-]+)+$',
error\_type: '',
message: ['邮箱不能为空哦', '邮箱格式有误']
},
{
type: 'password',
name: 'pwd',
placeholder: '请输入密码',
state: 0,
reg: '[a-z0-9]{8,16}',
error\_type: '',
message: ['密码不能为空哦!','请输入大于8位数小于16位数的字母或数字!']
}
],
}
state 代表输入的value值是否符合规范
reg 为value值得正则表达式
input.vue 接收数据, 每当输入框失去焦点时对内容进行检验.
<template>
<input :type="input\_data.type" :placeholder="input\_data.placeholder" @blur="style($event)">
</template>
💨二 给父组件传递value值
register.vue
在子组件内添加 :*changeData*.*sync*="formData.email"
input.vue
为input绑定事件 @input="changeData($event)"
这里我给密码进行了md5加密
changeData(e){
// 密码类型用md5加密
if(this.input_data.type = 'password') {
this.$emit('update:changeData', md5(e.target.value.trim()))
}else {
this.$emit('update:changeData', e.target.value.trim())
}
}
💨三 错误提示
在父组件中添加一个错误提示条.
设置一个变量 error_message
message: {
// 错误信息提示
error\_message: '',
// 错误提示条的透明度
opacity: 0,
// 控制提交按钮
go: false
},
register.vue
对子组件绑定事件
:*error_message*.*sync*="message.error_message"
对 error_message 进行数据监视, 每当error_message发生改变时,就进行一次提示
watch: {
'message.error\_message': {
handler(){
this.alertmessage()
}
}
}
input.vue
input每次触发 @blur="style($event)"
的时候, 根据 input_data.error_type
的值, 触发 update:error_message
事件, input_data.message[error_type]
为参数,以改变error_message的值
即: this.$emit('update:error_message', this.input_data.message[0])
💨四 格式检验
根据父组件传过来的数据 input_data
中的 reg
对value
值进行检验
将检验的结果反映给 register.vue(父组件)
检验分为两种情况:
格式无误: 将 input_data 中的state修改为true.
格式有误: 判断错误类型, 修改 error_type
我们不能直接在 input.vue 中修改 input_data
的数据.
单向数据流
所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。
我们需要在 register.vue 中为 input.vue 绑定自定义事件, 子组件将数据以参数的形式传给父组件,并触发($emit)
该事件.
register.vue
为子组件绑定以下事件:
这里我用了 .sync
修饰符, 不了解的可以去查查
:statechange.sync="input_data[0].state"
:error_typechange.sync="input_data[0].error_type"
input.vue
### 前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**