【Vue】封装input组件

📘前言

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭
💨💨💨

【Vue】封装input组件

📘实战目的

封装一个自定义的input组件,只适用于 input元素type属性为text或password.

📘实战效果

📘核心思想

准备: 需要两个文件,分别为 register.vue(父组件), input.vue(子组件)

register.vue 引入 input.vue

import inputstyle from'@/components/input.vue'exportdefault{components:{inputstyle},}

💨一 格式规范

在 register.vue 中对输入框的信息进行设置, 并传给子组件 input.vue.

<inputstyle:input_data="input_data[0]"></inputstyle>

exportdefault{...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

exportdefault{props:['input_data']methods:{// 根据 is_format判断数据格式是否正确,并将检验的信息传给父组件style(e){let reg =null
            reg =eval(`/${this.input_data.reg}/`)let state = reg.test(e.target.value)if(!state){this.$emit('update:statechange',false)if(e.target.value){this.$emit('update:error_typechange',1)// 下文有讲this.$emit('update:error_message',this.input_data.message[1])}else{this.$emit('update:error_typechange',0)this.$emit('update:error_message',this.input_data.message[0])}}else{this.$emit('update:statechange',true)}},}}

💨五 多个input框的检验

检验input_data中是否有state为false的对象.

有就根据error_type进行错误提示

go变量控制是否触发提交表单.

for(let i =0; i <this.is_format.length; i ++){if(!this.is_format[i].style){this.errormessage=this.is_format[i].message[this.is_format[i].error_type]this.alertmessage()this.go =falsebreak;}this.go =true}

📢写在最后

• 看到这里有没有收获什么呢?🎀🎀🎀
• 🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的
• 觉的博主写的不错的,可以给个一键三连lia~✨✨