老师我对下面这个问题非常困惑，困惑到昨天一宿没睡着。求老师解惑！

Question

老师我对下面这个问题非常困惑，困惑到昨天一宿没睡着。求老师解惑！
疑惑的点我标注在代码中了，求老师解惑

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);

Answer 1

张轩 2021-01-24 09:31:02

同学你好 说明你想的非常认真 不过也要注意身体 不懂的可以问 哈哈

疑惑 1，2，3 你的理解都是对的

疑惑4 关键你要搞清楚 validateInput 的值也就是 在另外一个组件中的 inputRef.val 为什么能变化，请同学记住它是响应式对象啊，我们将一个函数传递到另外一个实例中使用，响应式对象一直保持着对应的引用，所以调用的时候自然能拿到 ValidateInput 中，里面随时变化的值。