VUE js 在不同的组件层次结构中调用子组件方法

Question

我有以下 vuejs 组件层次结构。 当每次调用 COMP_A_TWO submit() 方法时，我想要调用 COMP_B_ONE validate() 方法。

MAIN_COMPONENT
              COMP_A_ONE
                    COMP_B_ONE
                          validate()
                    COMP_B_TWO
                          validate()
              COMP_A_TWO
                    submit()      

我已经实现了在 COMP_A_TWO 中触发提交时发出，可以在 MAIN_COMPONENT 中收听

submit() {
  this.$emit('submit')
}

在这方面似乎最好的方法是什么？任何建议表示赞赏。

Answer 1

我可以通过两种方式完成。

1 - 全球EventBus 我将创建一个 eventBus 并从任何文件在其上注册事件并在任何地方收听 -

import { EventBus } from '@/eventBus' 
// simply import it to component which need listen the event


//Register Event where you have your methods - like In your COMP_B_TWO                   
 EventBus.$on('validate', () => { this.validate() })

// Emit event from another component
EventBus.$emit('validate')// Like directly from your COMP_A_TWO

要了解如何创建 eventBus，请遵循此 - Global Event Bus Vue

---

我能想到的另一种方式是

2 - 引用

添加对COMP_A_ONE的引用

<COMP_A_ONE ref = "one" />

然后添加对COMP_B_ONE的引用

<COMP_B_ONE ref = "b-one" />

现在当你从main component触发submit时

执行它 -

this.$on('submit', () => {
  this.$refs.one['b-one'].validate()
})

这完全取决于你想走哪条路 -

• 如果您需要拨打validate更多的地方，我建议选择EventBus
• 您只需要当前组件即可拥有它，使用Refs