Migration to Vue 2.0 $ on () does not hear $ emit ()

Question

Background: I am moving from 1.0 to 2.0.

I am currently using nested components. The relationship between parent and child is perfectly beautiful. However, the relationship between the parent component and the main instance of Vue () is broken. In the computed property cssstyleinside the instance, Vue () is not updated based on $ emit () / $ on (), as I expected.

Relevant sections:

Using 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 the main instance of Vue ()

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

. Vue() . , , <input>. , , <input>. . show : http://rc.vuejs.org/guide/components.html#Custom-Events, , , Vue().

: , :

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

cssstyle Vue().

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

, :

this.$root.cssstyle

?

Answer 1

2.0 docs.

this custom-component:

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

, , -

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

JS:

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