Vue组件通信

Question

我有两个 Vue 组件：

 Vue.component('A', {});

Vue.component('B', {});

如何从组件 B 访问组件 A？组件之间的通信如何进行？

原文由 Cas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

跨组件通信在 Vue.js 文档中没有得到太多关注，也没有很多教程涵盖这个主题。由于组件应该是隔离的，因此您永远不应该直接“访问”组件。这会将组件紧密耦合在一起，而这正是您要避免的事情。

Javascript 有一个很好的通信方法：事件。 Vue.js 内置了事件系统，主要用于父子通信。 从文档：

虽然可以直接访问 Vue 实例的父子实例，但使用内置的事件系统进行跨组件通信更方便。它还使您的代码耦合度更低，更易于维护。一旦建立了父子关系，您就可以使用每个组件的事件实例方法来分派和触发事件。

他们的示例代码来说明事件系统：

 var parent = new Vue({
  template: '<div><child></child></div>',
  created: function () {
    this.$on('child-created', function (child) {
      console.log('new child created: ')
      console.log(child)
    })
  },
  components: {
    child: {
      created: function () {
        this.$dispatch('child-created', this)
      }
    }
  }
}).$mount()

Dan Holloran 最近写了一篇关于他在跨 组件 消息传递方面的“挣扎”的文章，分为 两篇。如果您需要在没有父子关系的组件之间进行通信，这可能对您有所帮助。

我体验过的另一种方法（除了使用事件进行通信）是使用中央组件注册表，该注册表引用了公共 API 以及绑定到它的组件实例。注册表处理对组件的请求并返回其公共 API。

在 Vue.js 的上下文中，事件将由我选择的武器。

原文由 pesla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

除了 pesla 的回答之外，请查看 构建大型应用程序下指南的状态管理部分：http: //vuejs.org/guide/application.html#State_Management 。我在这里基于此创建了一个 jsfiddle ： https ://jsfiddle.net/WarwickGrigg/xmpLg92c/。

这种技术也适用于组件：父子、兄弟姐妹组件关系等。

 var hub = {
  state: {
    message: 'Hello!'
  }
}

var vmA = new Vue({
    el: '#appA',
    data: {
      pState: {
        dA: "hello A"
    },
    hubState: hub.state
  }
})

var vmB = new Vue({
    el: '#appB',
    data: {
      pState: {
        dB: "hello B"
    },
    hubState: hub.state
  }
})

原文由 Warwick 发布，翻译遵循 CC BY-SA 3.0 许可协议