廣播事件嵌套路線VueJS 2點

我有如下因素的路線廣播事件嵌套路線VueJS 2點

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

這裏我Home.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>

而且Nested1.vue

<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>

我想找出辦法EXCUTE通過單擊Home中的Submit按鈕嵌套1的submit方法。可能嗎？

來源

2017-09-27 huuuk

還有的實在沒有足夠的信息在這裏。目前還不清楚你甚至在問什麼 – Phil

有人猜測，你總是可以使用一個活動巴士〜https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication – Phil

在你Home.vue改變這一行：

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

而且調用此方法來在Nested1執行submit：

this.$refs.routerView.submit()

來源

2017-09-27 05:16:33 imcvampire

廣播事件嵌套路線VueJS 2點

回答

相關問題