Question

组件1

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

组件2

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

我正在尝试警告组件1的组件2被“发射”。但这没有发生。我做错了。我是否应该在主要js上添加一些内容？

Answer 1

所以您要寻找的是事件总线（全局事件）

我建议您在需要实现事件总线的任何时候考虑使用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 2

除了您的$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>

我个人不太倾向于使用这种模式；我发现最好将跨组件通信作为道具从父母到孩子，以及从孩子到父母作为直接$emit（而不是在$root上）进行处理。当我发现我需要同级到同级的通信时，这通常表明我做出了一些糟糕的体系结构选择，或者我的应用程序已经足够大以至于我应该切换到vuex。将所有事件消息都堆积到单个位置（无论是$root还是eventbus实例），都倾向于使应用程序难以推理和调试。

至少在命名事件时，您应该非常非常明确，因此更容易分辨事件的来源；事件名称（例如“ handleClick”或仅是“事件”）很快就会成为未知的未知事物。

Answer 3

如果组件2是组件1的父级，则可以执行以下操作：

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

对于组件2的组件

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

和第二个分量

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

Answer 4

在此示例中，我将使用$ 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 个答案: