关于 mitt 疑惑

Question

这个export emitter 应该是个单例吧，如果是的话，一个页面有多个 from 组件的话，会造成影响吧。

Answer 1

张轩 2020-10-10 17:34:20

同学 我们的 mitt的实例 不是在每个 Form 组件中都新建了一个吗？

export const emitter = mitt()

 

• 慕莱坞0998854 #1

  老师，看了这个问题我也有疑惑了，我们每次使用Form组件的时候，是每次都在全局创建了一个mitt实例吗？还是说每次创建的实例只存在于各个Form组件的内部？这是怎么做到的呢？

• 提问者 XYXLI #2

  在 App.vue 中，使用两个 ValidateForm 组件，伪代码如下
  ```
  <template>
    <div class="container">
      <validate-form @form-submit="onFormSubmit">
        <div class="mb-3">
          <validate-input></validate-input>
        </div>
        <div class="mb-3">
          <label for="form-label">邮箱地址</label>
          <validate-input></validate-input>
        </div>
      </validate-form >
      <validate-form @form-submit="onFormSubmit">
        <div class="mb-3">
          <label for="form-label">邮箱地址</label>
          <validate-input></validate-input>
        </div>
        <div class="mb-3">
          <label for="form-label">邮箱地址</label>
          <validate-input></validate-input>
        </div>
      </validate-form >    
    </div>
  </template>
  ```
  
  然后在 ValidateForm 的 setup 函数中的 callback 中
  
  ```
      const callback = (func?: ValidateFunc) => {
        if (func) {
          funcArr.push(func)
          console.log(funcArr.length)
        }
      }
  ```
  
  打印的结果是 1、2、3、4 而不是 1、2、1、2