Question

我有以下vuejs组件层次结构。每次调用 COMP_A_TWO commit（）方法时，我想做的就是调用 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" />

现在，当您从submit触发main component

时

执行它-

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

这完全取决于您想走的路-

如果您需要致电validate到更多地方，我建议选择EventBus
您只需要当前组件即可使用，请使用Refs

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

1 个答案: