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

Question

组件 1

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

组件 2

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

我正在尝试从组件 1 中提醒 "fired" 组件 2。但这并没有发生。我做错了什么。我应该在主 js 上添加一些东西吗？

Answer 1

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

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

for componant 2 component like

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

在组件二中

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

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

Answer 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 指令。（对不起我的英语）

Answer 4

除了您 $on 中的小错别字外，您还不清楚您做错了什么，因为您没有提供足够的上下文，但这里有一个您正在尝试的工作示例做（通过 $root 元素发送和接收事件，而不实例化单独的 eventbus 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" 或 "event" 等事件名称很快就会变成神秘的未知数。

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

Communicate between two components(not related with child-parent)

event-bus

vue.js