先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

📘核心思想

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

register.vue 引入 input.vue

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

💨一 格式规范

在 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

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）
[外链图片转存中…(img-waSJAnCU-1713353194496)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！