How to emit custom events to another page

Questions
1

I am using the Cordova geolocation plugin and I’m setting up a location watch in my app.js… I would like to be able to emit an event with this data that I can pick up on certain pages. So far I have the following which does generate an event but I don’t know how to set different listeners for different pages.

var watchID = navigator.geolocation.watchPosition(
  function (position) {
    app.emit('locationChange', position.coords.latitude, position.coords.longitude );
  },
  function(error) {
    app.emit('locationError', error.code, error.message );
  },
);

Is there a better way to emit to a specific component scope which I can then tap into using the on listener?

return {
  on: {
    locationChange: function( lat, lng ) {
      // Do stuff here
    }
  }
}
2 
return {
  created: function () {
    this.$app.on('locationChange', this.onLocationChange);
  },
  beforeDestroy() {
    this.$app.off('locationChange', this.onLocationChange);
  },
  methods: {
    onLocationChange: function (lat, lng) {
      // handler here
    }
  },
}
3

Thank you @nolimits4web, this works.
Can I just ask, are created() and beforeDestroy() both page events? and how come they don’t need to be in the on: {} object? I can’t seem to find the documentation for this. As well as making it work I’d like to learn why it works.

4

It is a component lifecycle hooks http://framework7.io/docs/router-component.html#component-structure