One vue page calls a method in another vue page

  javascript, question

Want to copyvue-materialTheDemo & DocumentWrite a small example of the effect of the page.

The problem is:
png_1

In the red circle above, clickButtonButton, cannot be executedtoggle()Method to realize displaySidenavThe effect of.

The code is as follows:

App.vue

...
 The main content in < router-view/> // is a routing view
 ...

MenuItems.vue: side menu bar

<template>
 <div class="menu-items">
 <!  -sidebar->
 <md-sidenav ... ref="main-sidebar">
 ...
 </md-sidenav>
 <!  -click one of the menus in MenuItems, and the corresponding content display area->
 <router-view/>
 </div>
 </template>
 <script>
 export default {
 methods: {
 <!  -methods you want to execute in other Vue->
 toggleSidenavInMenuItems() {
 this.$refs['main-sidebar'].toggle();
 bracket
 bracket
 bracket
 </script>

ContentPage.vue: right content container (includestoolbarAndContent)

<template>
 <div class="content-page">
 <!  -- Toolbar -->
 <md-whiteframe md-tag="md-toolbar">
 < MD-button @ click = "togglesideenavincontentpage ()" > toggle button < /md-button >
 </md-whiteframe>
 <!  -- Content -->
 <slot/>
 </div>
 </template>
 <script>
 export default {
 methods: {
 toggleSidenavInContentPage() {
 // TODO: How to write here to execute the toggle .. method in MenuItems?  ?  ?
 bracket
 bracket
 bracket
 </script>

IntroductionPage.vue: example of using ContentPage template

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

The problem is that in the above codeTodoWhere, how to define ittoggleSidenavInContentPage()Methods? ?

With $emit and $on
Send with $emit, $on receive, seeLink
Can be found on App.vue inside

import Vue from 'vue'
 Event=new Vue()
 //Then send via Event.$emit and Event.$on receive in component inside

Or create a new event.js

import Vue from 'vue'
 export var Event = new Vue()
 
 In the component inside to be delivered
 
 import { event } from 'event.js'
 Event.$emit  ......