本文介绍了在Vue中实现同级页面组件间调用方法的问题。通过使用$emit和$on事件总线，或者Vuex的状态管理，来解决ContentPage.vue组件调用MenuItems.vue组件中toggleSidenavInMenuItems()方法的问题。提供了具体的代码示例和解决方案。
想仿着 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模板的例子
...</
最低0.47元/天 解锁文章
扫一扫
7886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
