vue 同级页面调用方法_一个vue页面调用另一个vue页面中的方法

想仿着 vue-material 的 Demo & Document 页面的效果写一个小例子.

遇到问题的地方是:

如上图红色圈出的地方，点击 button 按钮时，无法执行 toggle() 方法，实现显示 Sidenav 的效果。

代码如下:

App.vue

...

// 里面主要内容就是一个路由视图

...

MenuItems.vue: 侧边菜单栏

...

export default {

methods: {

toggleSidenavInMenuItems() {

this.$refs['main-sidebar'].toggle();

}

}

}

ContentPage.vue: 右侧内容容器(包括 toolbar 和 content)

Toggle按钮

export default {

methods: {

toggleSidenavInContentPage() {

// TODO: 这里该怎么写,去执行在 MenuItems 中的 toggle..方法？？？

}

}

}

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

...

问题就是上述代码中 TODO 那里，该怎么去定义 toggleSidenavInContentPage() 方法？？