mitt的问题，兄弟组件互相触发on
来源：5-10 ValidateForm 编码第三部分 - 寻找外援 mitt
慕盖茨7486032
2021-06-12
老师，我的validateForm组件的层级是validateForm -> validateItem -> validateInput, 如下：
<validate-form :rules="rules" :model="form">
<form-item label="用户名" prop="name" style="margin-bottom: 30px">
<form-input v-model="form.name"></form-input>
</form-item>
<form-item label="密码" prop="password">
<form-input v-model="form.password"></form-input>
</form-item>
<form-item label="密码" prop="password">
<form-input v-model="form.password"></form-input>
</form-item>
</validate-form>
rules规则校验是放在form-item中去做校验，所以我在formItem中监听on方法，在input中触发了emit，结果input中一次emit，会触发formItem中多次触发on，触发的数量根据兄弟节点来决定，现在很迷茫，不知道如何解决这个问题
2回答
-
同学你好 我发现你参考了 element-plus 的API和写法，非常好，你这里出现问题的原因是 mitt 是最外侧 Form 上面的，也就是说一个 Form 一个实例，当 mitt.on('同名的事件名称')的时候，它是会添加多份的，所以这就是你出现问题的原因。
这里我想到两个解决方案，让事件名称不同，在 FormItem 中添加事件名称的时候，换成添加一个独一无二的事件名称，比如 FormItem 上面的 prop 属性。
70 行
mitter.on(`form-item-change-${props.prop}`, ...)
第二种方法，参考 element-plus 一个 FormItem 创建一个 mitter 实例，而不是只用 form 的一个。
请看源代码：https://github.com/element-plus/element-plus/search?q=el.form.blur
特别注意它采用 provide /inject 的模式提供了最外侧 Form 和 FormItem 的实例供下层使用。代码：
比你使用 getCurrentInstance() 再往上查找 parent 要简便不少，建议使用。
012021-06-14 -
张轩
2021-06-13
同学你好 请提供一下你的源代码（git） 我在本地帮你看一下欧 谢谢
012021-06-13
相似问题