关于mitt单例问题
来源：5-10 ValidateForm 编码第三部分 - 寻找外援 mitt
XYXLI
2020-11-04
在 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
3回答
-
同学你好 这是我的 fix 方法：https://git.imooc.com/coding-449/zheye/commit/af02b431b969a5470a03b8c92fec341f6621e2bf 当然你的方法也可以 我使用的是 provider inject，原理都是类似的
10 -
XYXLI
提问者
2020-11-05
目前我的做法是给from和input添加emitter的props属性，然后再使用的地方 App.vue 里创建 mitt 实例传给from和input
00 -
张轩
2020-11-05
同学你好 非常感谢你反应的问题 我上午试了一下 确实会出现你说的问题 造成两个 form 相互影响，由于 mitt 是单例，我想的修改方法是在 form 上添加一个属性区分不同的 form，validateInput 发射事件的时候加上这个属性，这样就可以添加不同事件了。下午我修改更新一下，到时候告诉你。
012020-11-05
相似问题