关于mitt单例问题

Question

在 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

Answer 1

张轩 2020-11-05 18:11:02

同学你好 这是我的 fix 方法：https://git.imooc.com/coding-449/zheye/commit/af02b431b969a5470a03b8c92fec341f6621e2bf  当然你的方法也可以 我使用的是 provider inject，原理都是类似的

Answer 2

提问者 XYXLI 2020-11-05 10:22:12

目前我的做法是给from和input添加emitter的props属性，然后再使用的地方 App.vue 里创建 mitt 实例传给from和input

Answer 3

张轩 2020-11-05 10:20:07

同学你好 非常感谢你反应的问题 我上午试了一下 确实会出现你说的问题 造成两个 form 相互影响，由于 mitt 是单例，我想的修改方法是在 form 上添加一个属性区分不同的 form，validateInput 发射事件的时候加上这个属性，这样就可以添加不同事件了。下午我修改更新一下，到时候告诉你。

• 提问者 XYXLI #1

  使用依赖注入会不会更好点 Provide和inject