一個vue頁面調(diào)用另一個vue頁面中的方法

想仿著 vue-material 的 Demo & Document 頁面的效果寫一個小例子.

遇到問題的地方是:

如上圖紅色圈出的地方，點擊 button 按鈕時，無法執(zhí)行 toggle() 方法，實現(xiàn)顯示 Sidenav 的效果。

代碼如下:

App.vue

...
<router-view/> // 里面主要內(nèi)容就是一個路由視圖
...

MenuItems.vue: 側(cè)邊菜單欄

<template>
    <div class="menu-items">
        <!-- 側(cè)邊欄 -->
        <md-sidenav ... ref="main-sidebar"> 
            ...
        </md-sidenav>
        <!-- 點擊 MenuItems 中的其中一個菜單，對應(yīng)的內(nèi)容顯示區(qū) -->
        <router-view/> 
    </div>
</template>
<script>
    export default {
        methods: {
            <!-- 想要在其他Vue中執(zhí)行的方法 -->
            toggleSidenavInMenuItems() {
                this.$refs['main-sidebar'].toggle();
            }
        }
    }
</script>

ContentPage.vue: 右側(cè)內(nèi)容容器(包括 toolbar 和 content)

<template>
    <div class="content-page">
        <!-- Toolbar -->
        <md-whiteframe md-tag="md-toolbar">
            <md-button @click="toggleSidenavInContentPage()">Toggle按鈕</md-button>
        </md-whiteframe>
        <!-- Content -->
        <slot/>
    </div>
</template>
<script>
    export default {
        methods: {
            toggleSidenavInContentPage() {
                // TODO: 這里該怎么寫,去執(zhí)行在 MenuItems 中的 toggle..方法？？？
            }
        }
    }
</script>

IntroductionPage.vue: 使用ContentPage模板的例子

<template>
    <content-page>
        ...
    </content-page>
</template>

問題就是上述代碼中 TODO 那里，該怎么去定義 toggleSidenavInContentPage() 方法？？