vue $emit child function to more parents

Posted 2023-02-22

【中文标题】vue $emit child function to more parents

【英文标题】：

【发布时间】：2022-01-22 22:05:40

【问题描述】：

我有一个客户注册表单和一个公司注册表单。

两者都遵循相同的程序。首先检查电话号码，在收到短信并验证电话号码后，会弹出表单的其余部分。只有一个 $emit 有效。它如何为父母双方使用 $emit？

telephonenumber的validation-form是一个子组件，嵌套在带有form的组件中。在客户注册和公司注册中都一样。

<div>
<div v-show="!isOpen">
    <Verify-telephone @toggle="toggle($event)" />
</div>
<div v-show="isOpen">
//rest of the form
</div>

在验证子项中的验证电话后，它会被触发关闭，并通过 $emit 打开另一个带有其他输入的表单。

methods: 
checkSMSCode() 
        .then((response) => 
            this.$emit('toggle', false)                                        
        )

【参考方案1】：

一个简单的解决方案是将事件发送到$root 并在父母双方中收听： 在孩子中（Verify-telephone.vue 或任何其他组件）：

methods: 
  checkSMSCode() 
    ...
    .then((response) => 
      this.$root.$emit('toggle', false);    
    
  )

在父级中设置根事件的监听器：

created: 
  this.$root.$on(‘eventName’, (event) => 
    this.toggle(event);
  );

【讨论】：

我不明白解决方案。它太神秘了。非常遗憾。这完全是由于我缺乏知识。

@Tichel，我刚刚编辑了我的帖子以使解决方案更加清晰

【参考方案2】：

在 Vue 论坛上发表相同问题的帖子后，我不得不明白子组件只能有一个父组件。而不是两个怎么会有它。这让我认为最好用两个子组件（注册用户和注册公司）制作父组件（电话验证）。这一切都非常有教育意义。