Vuejs - 如何将参数从子路由传递到父路由？答案

【问题标题】：Vuejs - How to pass params from child route to parent route?Vuejs - 如何将参数从子路由传递到父路由？
【发布时间】：2017-11-21 12:02:50
【问题描述】：

我是 vuejs 的初学者。

我对 vue-router 嵌套路由的一些做法有疑问。

以防万一，这是一个嵌套路由配置。

const router = new Router({
    routes: [
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true
            },
            children: [
                {
                    path: 'overview',
                    name: 'Overview',
                    component: Overview,
                    meta: {
                        requiresAuth: true
                    }
                }
            ]
        }
    ]
})

如果我想将数据从子路由（概览）传递到父路由（仪表板）

我应该如何处理？

我不希望 url 有任何变化（/dashboard/overview），只需从子路由接收数据参数。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

您可能需要考虑使用 Vuex 作为在不同组件之间共享状态的一种方式（或者如果您是初学者，则可能不会）。

或者，您可以在子组件中发出一个事件：

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>

【讨论】：