javascript - Migrating to Vue 2.0 $on() is not hearing $emit() - Stack Overflow

Background: I'm migrating from 1.0 to 2.0.

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

The relevant sections:

Usage of parent ponent in HTML:

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

Inside the Parent Component

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

Inside of main Vue() instance

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

The puted property inside the parent updates just fine. However the the puted 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 puted property data changing. I tried to use the method show here: .html#Custom-Events, but what concerns me about this documentation is that it is talking about event listening between ponents and not a parent ponent and the main Vue() instance.

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

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

and moving cssstyle from puted 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?

Background: I'm migrating from 1.0 to 2.0.

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

The relevant sections:

Usage of parent ponent in HTML:

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

Inside the Parent Component

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

Inside of main Vue() instance

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

The puted property inside the parent updates just fine. However the the puted 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 puted property data changing. I tried to use the method show here: http://rc.vuejs/guide/ponents.html#Custom-Events, but what concerns me about this documentation is that it is talking about event listening between ponents and not a parent ponent and the main Vue() instance.

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

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

and moving cssstyle from puted 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?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 9, 2017 at 20:42 Bert 82.5k1717 gold badges203203 silver badges166166 bronze badges asked Sep 4, 2016 at 17:31 nu everestnu everest 10.3k1212 gold badges7474 silver badges9393 bronze badges 2

• The first way should work. – gurghet Commented Sep 5, 2016 at 7:45
• The puted cssstyle on the root Vue instance doesn't get triggered by the padding_changed event. – nu everest Commented Sep 5, 2016 at 20:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

If you emit this from your custom-ponent:

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

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

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

Then in your JS:

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