Vue.js 将事件广播到VueJS 2中的嵌套路由

我有以下路线

<script>
  routes = [
    {
      path: '/',
      component: Home,
      children: [{
          path: 'nested1',
          name: 'nested1',
          component: Nested1,
        }, {
          path: 'nested2',
          name: 'nested2',
          component: Nested2,
        }
      ]
    }
  ];
</script>

和

Nested1.vue

<template>
  <div class="wrapper">
    <div class="toolbar">
      <div class="toolbar-actions">
        <el-button :plain="true" type="info" @click="goBack" size="small" icon="arrow-left">Back</el-button>
        <el-button type="success" @click="onSubmit" size="small" icon="check">Submit</el-button>
      </div>
    </div>

    <el-row>
      <el-col :span="4">
        <div class="sidemenu-wrapper">
          <el-menu :router="true" default-active="0" class="sidemenu" ref="sidemenu">
            <el-menu-item index="0" :route="{name: 'nested1'}">nested 1</el-menu-item>
            <el-menu-item index="1" :route="{name: 'nested2'}">nested 2</el-menu-item>
        </div>
      </el-col>

      <el-col :span="20">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    onSubmit() {
      // here I want to be able run certain method in 
      // child route
    },
  }
};
</script>

<template>
  <div class="wrapper">
    <el-row>
      <el-col :span="4">
        <el-from>
          <!-- inputs, selects, etc -->
        </el-from>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // bla bla bla
    }
  },
  methods: {
    submit() {
      // send data to backend 
    },
  }
};
</script>

导出默认值{
数据（）{
返回{
加载：false，
//呜呜呜呜
}
},
方法：{
提交（）{
//将数据发送到后端
},
}
};

---

我想通过单击Home中的submit按钮找到执行Nested1的

submit

方法的方法。可能吗

在您的

主页中.vue

更改此行：

<router-view :ref="routerView"></router-view>

---

这里真的没有足够的信息。你在问什么都不清楚。猜测一下，你总是可以使用事件总线~

this.$refs.routerView.submit()