Vue Dynamic Comp Choose From Inside

From child component controlled choosing mechanism. That I haven't seen in the guide.

by simati

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">

  <component :is="yourView" v-on:load="loadView"></component>

</div>

<p>
  I am not sure this is the right way to do this, but no correct references have I found about using $on or switching between dynamic components in case you want to switch from the inside and not just from the instance. Correct me!
</p>

JavaScript

var chooseOne = {
  template: '<div><a v-on:click.prevent="loadA" href="#">Choose A</a><br><a v-on:click.prevent="loadB" href="#">Choose B</a><div>',
  methods: {
    loadA: function() {
      this.$emit('load', 'compone');
    },
    loadB: function() {
      this.$emit('load', 'comptwo');
    },
    loadC: function() {
      this.$emit('load', 'choose');
    },
  },
};



var compA = {
  template: '<p>This is component A <br><a v-on:click.prevent="loadC" href="#">Back to choose</a></p>',
  methods: {
    loadC: function() {
      this.$emit('load', 'choose');
    },
  },
};

var compB = {
  template: '<p>This is component B <br><a v-on:click.prevent="loadC" href="#">Back to choose</a></p>',
  methods: {
    loadC: function() {
      this.$emit('load', 'choose');
    },
  },
};


// This is our front-end app for activation: #activate-page-app
var App = new Vue({
  el: '#app',
  data: {
    yourView: 'choose',
  },
  methods: {
    loadView: function(selected) {
      this.yourView = selected;
    },
  },
  components: {
    choose: chooseOne,
    compone: compA,
    comptwo: compB,
  },
});


// Listen to component emitted event
// and switch components:
// App.$on('loadA', App.loadView);
// App.$on('loadB', App.loadView);
// App.$on('loadC', App.loadView);