Vue组件通信

Question

我有两个Vue组件：

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

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

如何从组件B访问组件A？组件之间的通信是如何工作的？

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 )最近在二 棋子上写了一篇关于他与跨组件信息的“斗争”的文章。如果您需要在没有父-子关系的组件之间进行通信，这可能会对您有所帮助。

我使用过的另一种方法(除了使用事件进行通信之外)是使用一个中心组件注册中心，该注册中心具有对公共API的引用，并具有绑定到它的组件实例。注册表处理组件的请求并返回其公共API。

在Vue.js的背景下，事件将由我选择。

Answer 2

除了比斯拉的答案外，还可以看看指南的构建大型应用程序下的国家管理科：管理。我在这里创建了一个小提琴：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
  }
})

Answer 3

还可以通过在Vue应用程序中创建单个全局事件中心来建立组件之间的通信。就像这样：-

var bus = new Vue();

现在，您可以创建自定义事件并从任何组件中侦听它们。

     // A.vue
    // ...
    doThis() {
        // do the job
    
        bus.$emit('done-this');
    }
    
    // B.vue
    // ...
       method:{
             foo: function()
          }
    created() {
        bus.$on('done-this', foo);
    }

有关这方面的更多信息，可以在来自官方文件。上找到。