想仿著 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() 方法？？

回答

用$emit和$on

用$emit發送，$on接收，具體參見鏈接

可以在App.vue里

import Vue from 'vue'

Event=new Vue()

//然后在組件里通過Event.$emit發送，Event.$on接收

或者新建一個event.js

import Vue from 'vue'

export var Event = new Vue()

在要傳遞的組件里

import { event } from 'event.js'

Event.$emit......

你可以這樣寫看看

在ContentPage.vue中

import ContentPage from 'ContentPage'

var content = ContentPage//在這個地方賦值一下

export default {

methods: {

toggleSidenavInContentPage() {

// TODO: 這里該怎么寫,去執行在 MenuItems 中的 toggle..方法？？？

content.methods.toggleSidenavInMenuItems();//這個地方掉用一下

}

}

}

這樣就可以調用了

vuex大法好，點擊的時候改變state某一個狀態，另外一個頁面去computed這個變量，檢測到變化就去調用方法。

總結

以上是生活随笔為你收集整理的vue 同级页面调用方法_【Vue】一个vue页面调用另一个vue页面中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。