Vue: Get return value (int) of $emit

[ian-patel]

Version

2.3.3

Reproduction link

https://jsfiddle.net/ianpatel/3bs145u7/

Steps to reproduce

var eventHub = new Vue()

Vue.component('foo', {
    template: `<div>I'm foo <button @click="emit">Emit {{ value }}</button></div>`,
  data: function() {
    return {
        value: 22
    }
  },
  methods: {
    emit() {
        var newVal = eventHub.$emit('makeTwice', this.value)
      // I'm expecting newVal will be 44 but it is object of Vue$3
      alert(newVal)
     // Please check into Console log
      console.log(newVal)


      this.value = newVal // Check console log, can not Convert
    }
  }
})

new Vue({
  el: '#app',
  data: function() {
    return {}
  },
  mounted() {
    eventHub.$on('makeTwice', this.makeTwice)
  },
  methods: {
    makeTwice(val) {
            return val * 2
        }
  }
})

What is expected?

I'm trying to Call other component method using single event hub var eventHub = new Vue(), but I would like to get a return value from other component method.
https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced

What is actually happening?

Currently eventHub.$emit('makeTwice', this.value) returning object of Vue$3. but component method return a value.

Vue$3 {_uid: 0, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}

---

Am I missing something in https://vuejs.org/v2/api/#vm-emit.
vm.$emit( event, […args] ) do not have any return; It may possible, I'm expecting return value but $emit do not return method's return value.

[sirlancelot]

$emit doesn't return anything. It would be difficult to imagine what it's supposed to return when you consider the fact that $emit could fire several different functions, or none at all.

[ian-patel]

@sirlancelot any alternative? Call other component's method and return a value, without $emit

[ian-patel]

This is what I found from guid: https://vuejs.org/v2/guide/components.html#Composing-Components

In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events

Any alternatives, I just want to return calculated value from parent method (I want to reuse, do not want duplicate code), Props are not really trustable when it is two way.

[sirlancelot]

You can turn your eventHub in to a poor-man's Vuex store by supplying the constructor with a starting data object. Then you can use it to create a computed property.

Seeing as your original post isn't strictly an "issue" by the Vue team's definition, you may be able to get better assistance on the Forums, Gitter, or Stack Overflow.

[simplesmiler]

@ian-patel we encourage you to ask questions on forum or gitter. We try to use the issue tracker for bug reports and feature requests.

As for the question, $emit is a Pub/Sub, and what you are trying to do is called RPC. Instead of emitting an event you should provide a method to be called. A bare-bones implementation is https://jsfiddle.net/3bs145u7/12/ (fills in and calls a function by name, without dedicated API).