想仿着 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这个变量，检测到变化就去调用方法。
)
