【Vue】一个vue页面调用另一个vue页面中的方法

想仿着 vue-material 的 Demo & Document 页面的效果写一个小例子.

遇到问题的地方是:
【Vue】一个vue页面调用另一个vue页面中的方法

如上图红色圈出的地方，点击 button 按钮时，无法执行 toggle() 方法，实现显示 Sidenav 的效果。

代码如下:

App.vue

...
<router-view/> // 里面主要内容就是一个路由视图
...

MenuItems.vue: 侧边菜单栏

<template>
<div class="menu-items">
<!-- 侧边栏 -->
<md-sidenav ... ref="main-sidebar">
...
</md-sidenav>
<!-- 点击 MenuItems 中的其中一个菜单，对应的内容显示区 -->
<router-view/>
</div>
</template>
<script>
export default {
methods: {
<!-- 想要在其他Vue中执行的方法 -->
toggleSidenavInMenuItems() {
this.$refs['main-sidebar'].toggle();
}
}
}
</script>

ContentPage.vue: 右侧内容容器(包括 toolbar 和 content)

<template>
<div class="content-page">
<!-- Toolbar -->
<md-whiteframe md-tag="md-toolbar">
<md-button @click="toggleSidenavInContentPage()">Toggle按钮</md-button>
</md-whiteframe>
<!-- Content -->
<slot/>
</div>
</template>
<script>
export default {
methods: {
toggleSidenavInContentPage() {
// TODO: 这里该怎么写,去执行在 MenuItems 中的 toggle..方法？？？
}
}
}
</script>

IntroductionPage.vue: 使用ContentPage模板的例子

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

问题就是上述代码中 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......

https://cn.vuejs.org/v2/guide...

你可以这样写看看

在ContentPage.vue中
import ContentPage from 'ContentPage'
var content = ContentPage//在这个地方赋值一下
 export default {
        methods: {
            toggleSidenavInContentPage() {
                // TODO: 这里该怎么写,去执行在 MenuItems 中的 toggle..方法？？？
                content.methods.toggleSidenavInMenuItems();//这个地方掉用一下
            }
        }
    }
    这样就可以调用了

如果跨组件通信较少，可以使用vue的
&onhttps://cn.vuejs.org/v2/api/#...
和 $emithttps://cn.vuejs.org/v2/api/#...
如果有大量的信息通信且跨越的层级比较多建议使用VUEX https://vuex.vuejs.org/zh-cn/

vuex大法好，点击的时候改变state某一个状态，另外一个页面去computed这个变量，检测到变化就去调用方法。

以上是 【Vue】一个vue页面调用另一个vue页面中的方法 的全部内容， 来源链接： utcz.com/a/74680.html

回到顶部