Vue中子模块调用另一个子模块内的方法 ###前倾提要： 主页面`index.vue`内包含`header.vue`与`menu.vue`两个子模块。 现在想在`header.vue`中放置一个按钮来控制`menu.vue`中菜单的显示隐藏。 ###方法： ####`menu.vue`: ```html <template> <div> <el-menu v-if="menuShow" ref="menu" width="initial" class="sidebar-container"> //****** ``` ```javascript methods: { toggleMenu() { this.menuShow = !this.menuShow }, //****** ``` ####`index.vue`: ```html <sidebar ref="sidebarContainer" ***** > ``` ```javascript toggleMenu() { this.$refs.sidebarContainer.toggleMenu() }, ``` ####`header.vue`: ```html <el-button color="pink" dark @click="toggleMenu" > 菜单 </el-button> ``` ```javascript methods: { toggleMenu() { this.$emit('toggleMenu') }, ```
