老师我对下面这个问题非常困惑,困惑到昨天一宿没睡着。求老师解惑!
来源:5-12 ValidateForm 编码第四部分 - 大功告成
德玛西亚之前端
2021-01-23
老师我对下面这个问题非常困惑,困惑到昨天一宿没睡着。求老师解惑!
疑惑的点我标注在代码中了,求老师解惑
const validateInput = () => {
if (props.rules) {
const allPassed = props.rules.every(rule => {
let passed = true;
inputRef.message = rule.message;
switch (rule.type) {
case 'null':
passed = inputRef.val.trim() !== '';
break;
case 'userName':
passed = userNameReg.test(inputRef.val);
break;
case 'password':
passed = passwordReg.test(inputRef.val);
break;
case 'userfirstName':
passed = userFirstNameReg.test(inputRef.val);
break;
case 'userLastName':
passed = userLastNameReg.test(inputRef.val);
break;
case 'userEmile':
passed = userEmileReg.test(inputRef.val);
break;
default:
break;
}
return passed;
});
inputRef.error = !allPassed;
return allPassed;
}
return true;
};
onMounted(() => {
emitter.emit('form-item-created', validateInput);
**1、疑惑点:这段代码我的理解是子组件发送form-item-created,事件内容是validateInput这个函数体**
});
let funcArr = [];
const submitForm = () => {
const result = funcArr.map(func => func()).every(result => result);
3、疑惑点:我的理解中此时funcArr里面应该是有N个validateInput函数体
4、最终疑惑:为什么funcArr里这些validateInput函数体可以运行出结果?
我的认知中它们应该就是N个函数体代码,没有可以支持运行的数据,
我很疑惑支持它们运行的数据是哪来的?
是onMounted生命周期时,validateInput就已经附上数据了吗?
context.emit('form-submit', result);
};
const callback = func => {
funcArr.push(func);
**2、疑惑点:这段代码我的理解是父组件监听到form-item-created事件,并且把事件传来的validateInput函数体放到funcArr数组中**
};
emitter.on('form-item-created', callback);
写回答
3回答
-
同学你好 我记得昨天我回答过了 怎么答案没有了?神奇,再写一遍
1,2,3 你的理解都是正确的
4 请记住函数其实是按引用传递的,也就是说每个 input 组件实例上面的 validateInput 函数都纹丝不动的传递给了 form,包括里面的响应式对象,当每一个 input 变化的时候,里面的 响应式对象是对应变化的,所以你调用这些函数的时候,就等于调用了 input 中的那些函数。这样说应该明白啦吧
30 -
德玛西亚之前端
提问者
2021-01-23
如果有同学明白为什么 麻烦也解惑我一下 非常感谢!
如果我的问题表述看不懂,麻烦同学们告诉我,我重新组织语言补充。
10 -
元寸霖
2021-02-05
好问题,我也是困惑住了,感谢老师回答
00