Migrating to Vue 2.0 $on() is not hearing $emit()

Question

Background: I'm migrating from 1.0 to 2.0.

Currently, I'm using nested components. The relationship between the parent and child is perfectly fine. However, the relationship between the parent component and the main Vue() instance is broken. In computed property cssstyle inside the Vue() instance does not get updated based on $emit()/$on() like I was expecting.

The relevant sections:

Usage of parent component in HTML:

<f9-padding v-if="editable" ></f9-padding>

Inside the Parent Component

computed: {
    cssstyle: function() {
        var padding_style = this.padding();
        bus.$emit('padding_changed', padding_style);
        return padding_style;
    }
}

Inside of main Vue() instance

computed: {
    cssstyle: function() {
        console.log('cssstyle computed');
        bus.$on('padding_changed', function (padding_style) {
            return padding_style;
        });
        return 'padding: 0px;';
    },
    ...

The computed property inside the parent updates just fine. However the the computed property inside of the main Vue() instance only runs on page load. I do not understand how to emit data from a parent that is not using an <input> element. Most of the examples I've found on the site focus solely on the <input> case. I just have computed property data changing. I tried to use the method show here: http://rc.vuejs.org/guide/components.html#Custom-Events, but what concerns me about this documentation is that it is talking about event listening between components and not a parent component and the main Vue() instance.

Update: I was able to solve this issue by changing the computed property on the parent to this:

computed: {
    cssstyle: function() {
        var padding_style = this.padding();
        this.$root.cssstyle = padding_style;
        return padding_style;
    }
}

and moving cssstyle from computed to data in the root Vue() instance.

data: {
    cssstyle: 'padding: 0px;',
},

However, I feel a bit dirty for using:

this.$root.cssstyle

Is there no other way?

Answer 1

For event emitting and listening check this in the 2.0 docs.

If you emit this from your custom-component:

cssstyle: function () {
  /*...*/
  this.$emit('onsomething', params)
}

Then, wherever you make an instance of this component, you do something like this

<tamplate>
    <custom-component @onsomething="action"></custom-component>
</tamplate>

Then in your JS:

methods: {
  action: function (params) {
    console.log('On something')
  }
}