两个组件之间的通信（与子父级无关）答案

【问题标题】：Communicate between two components(not related with child-parent)两个组件之间的通信（与子父级无关）
【发布时间】：2019-02-13 10:40:55
【问题描述】：

组件 1

 getMyProfile(){    
       this.$root.$emit('event');
           console.log("emited")
     },

组件 2

mounted() {
    this.$root.$on('event', () = {
    alert("Fired");
 }
}

我正试图从组件 1 中警告“解雇”了组件 2。但这并没有发生。我做错了什么。我应该在主 js 上添加一些东西吗？

【问题讨论】：

试试this.$root.$on('event', () => {，因为你在=之后缺少>
我尝试了您的解决方案。还是什么都没有
尝试删除 $root 并像 this.$on('event', () => { 一样进行操作
不。还是一样
Vue components communication的可能重复

标签： vue.js event-bus

【解决方案1】：

除了$on 中的小错字之外，由于您没有提供足够的上下文，尚不清楚您做错了什么，但这里有一个您正在尝试做的工作示例（发送和通过$root 元素接收事件，无需实例化单独的事件总线 Vue 实例）。（许多人确实更喜欢通过单独的实例传递消息，但它在功能上类似于在 $root 上传递。）

我包含了一个有效负载对象来演示与事件一起传递信息。

Vue.component('sender', {
  template: '<span><button @click="send">Sender</button></span>',
  methods: {
    send() {
      console.log("Sending...")
      this.$root.$emit('eventName', {
        message: "This is a message object sent with the event"
      })
    }
  }
})

Vue.component('receiver', {
  template: '<span>Receiver component {{message}}</span>',
  data() {return {message: ''}},
  mounted() {
    this.$root.$on('eventName', (payload) => {
      console.log("Received message", payload)
      this.message = payload.message
    })
  }
})

new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <sender></sender>
  <receiver></receiver>
</div>

我个人不太倾向于使用这种模式；我发现最好将父子之间的跨组件通信作为道具处理，从子到父直接处理$emits（而不是$root）。当我发现我需要兄弟姐妹之间的沟通时，这通常表明我做出了一些糟糕的架构选择，或者我的应用程序已经变得足够大以至于我应该切换到 vuex。将所有事件消息集中到一个位置，无论是$root 还是事件总线实例，都会使应用程序更难推理和调试。

至少你应该非常明确地命名你的事件，这样更容易分辨它们来自哪里；诸如“handleClick”或只是“事件”之类的事件名称很快就会变成神秘的未知数。

【讨论】：

【解决方案2】：

所以你正在寻找的是一个事件总线（全局事件）

我建议您在需要实现事件总线的任何时候考虑使用 vuex。

让我们回到问题上来。

创建一个文件event-bus.js 这将用于捕获和分发事件。

import Vue from 'vue'

const EventBus = new Vue()

export default EventBus

现在在您的main.js 中注册您的事件总线

import Vue from 'vue'
import eventBus from './event-bus'
//other imports

Vue.prototype.$eventBus = eventBus

new Vue({
   ...
}).$mount('#app')

现在你可以：

用this.$eventBus.$on(eventName)收听事件
发射事件this.$eventBus.$emit(eventName)

【讨论】：

【解决方案3】：

在本例中，我将使用 $emit 将事件从子组件带到父组件

子组件：

Vue.component('Child component ', {
    methods: {
        getMyProfile: function() {
            this.$emit('me-event', 'YUP!')
        }
    },
    template: `
        <button v-on:click="getMyProfile">
            Emmit Event to Parrent
        </button>
    `
})

父组件：

Vue.component('Parent component ', {
    methods: {
      getEventFromChild: function(event) {
        alert(event)
      }
    }
    template: `
        <div>
          <Child-component v-on:me-event="getEventFromChild" />
        </div>
    `
})

例如，当您的数据以一种方式从父级传输到子级时，并且您想将数据从子级传输到父级时，您可以使用 $emit 并将其从子级传输。在父级中，您必须使用 v-on 捕获它指示。（对不起，我的英语）

【讨论】：

【解决方案4】：

如果组件 2 是组件 1 的父组件，您可以这样做：

getMyProfile(){    
       this.$emit('myevent');
           console.log("emited")
     },

对于像组件2这样的组件

<componant-2 @myevent="dosomething" ...></componant-2>

在组件二中

methods: {
  dosomething() {
    console.log('Event Received');
   }
}

【讨论】：