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 Holloran)最近写了一篇关于他的"斗争"的文章,分为两 部分.如果您需要在没有父子关系的组件之间进行通信,这可能对您有所帮助.

我遇到的另一种方法(除了使用事件进行通信),使用的是一个中央组件注册表,它引用了公共API,并绑定了一个组件实例.注册表处理组件的请求并返回其公共API.

在Vue.js的背景下,事件将由我选择的武器.

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
  }
})

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);
    }

有关这方面的更多信息,请参阅官方文档..