vue $emit child function to more parents答案

【问题标题】：vue $emit child function to more parentsvue $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)                                        
        })
}

【问题讨论】：

标签： node.js vue.js

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

【讨论】：