[Vuejs]-Vuejs – How to pass params from child route to parent route?

by

3👍

✅

You might want to consider using Vuex as a means of sharing state across different components (or maybe not if you’re a beginner).

Alternatively you can just emit an event in the child component:

Vue.use(VueRouter);

var Parent = {
  template: '<router-view @data="onData"></router-view>',
  methods: {
    onData(data) {
      alert('Got data from child: ' + data);
    },
  },
};

var Child = {
  template: '<div><input v-model="text"><button @click="onClick">Click Me</button></div>',
  data() {
    return {
      text: 'Hello',
    };
  },
  methods: {
    onClick() {
      this.$emit('data', this.text);
    },
  },
};

var router = new VueRouter({
  routes: [
    {
      path: '',
      component: Parent,
      children: [
        {
          path: '',
          component: Child,
        },
      ],
    },
  ],
});

new Vue({
  el: '#app',
  router,
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>

<div id="app">
  <router-view></router-view>
</div>
👤Decade Moon

Leave a comment