Vue.js如何在一个页面调用另一个同级页面的方法

实际开发过程中，当前组件调用完方法之后，也许会调取同一级组件中的方法，本人暂时想到两种办法:

1. vm.$on(event,callback)

新建一个工具函数util.js，代码如下：

import Vue from 'vue'
export default new Vue;
复制代码

然后两个页面都引用它

import util from './util'
复制代码

调用方：

methonds:{functionA(){util.$emit('test','test')}
}
复制代码

被调用方：

methonds:{functionB(){}
},
mounted(){util.$on('test',(test)=>{console.log(test);this.functionB();})
}
复制代码

2. vuex

新建store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);const store = new Vuex.Store({state: {list:[]},mutations: {setList(state,payload){state.list = payload}},actions: {getList({commit}){getList().then(res=>{commit('setList',res.data)})}}
});export default store;
复制代码

使用

调用方：

import {mapAction} from 'vuex'methonds:{...mapAction(['getList']),functionA(){this.getList()}
}
复制代码

被调用方：

import {mapAction,mapState} from 'vuex'computed:{...mapState(['list'])
},
methonds:{...mapAction(['getList'])
},
mounted(){this.getlist()
}
复制代码

Vue.js如何在一个页面调用另一个同级页面的方法相关推荐

vue js 和原生app调用回调方法问题
vue js 和原生app调用回调方法问题 import Vue from 'vue' export default { name: 'list', components: { }, data: () ...
HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
1. 使用HTML的link标签import另一个HTML页面 1.1 在HTML页面的<head>标签内使用<link>标签引入另一个HTML页面("centerH ...
vue 页面调用另一个页面的方法
由于开发需要,我需要在登录成功请求成功后,调用自定义组件页面的一个点击事件方法,让方法立即执行,经过思考后,想出了解决方法,特此记录一下页面关系:登录页跳转到主页,主页有调用自定义组件页面(登录页 ...
Vue.js的下载和调用
Vue支持双向绑定,非常不错.将视图层和模型层分离开.是基于MVVM模型,模型-视图-视图模型 .支持ES6. 目录一.在官网下载vue.js文件二.声明Vue对象三.Vue修饰符 1. v-o ...
【转】Vue.js入门教程（一）从静态页面到前后端分离开发
第一章:基础知识我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
vue.js能美化界面吗_vue将单页面改造成多页面应用的方法
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...
Html跨页面调用函数,一个cshtml如何在另一个cshtml中调用一个函数？
在webmatrix中,我在App_Data中创建了一个带有许多公共静态函数的DAL.cshtml. 我想从其他文件夹中的另一个.cshtml页面调用它们. 我现在得到了编译器错误消息:CS0103 ...
我php第一个页面,PHP 第一个 PHP 页面 - 第一个 PHP 页面 - phpStudy
第一个 PHP 页面在 web 服务器根目录(DOCUMENT_ROOT)下建立一个文件名为 hello.php,然后完成如下内容: Example #1 第一个 PHP 脚本:hello.php ...
Spring事务管理嵌套事务详解 : 同一个类中，一个方法调用另外一个有事务的方法
Spring 事务机制回顾 Spring事务一个被讹传很广说法是:一个事务方法不应该调用另一个事务方法,否则将产生两个事务. 结果造成开发人员在设计事务方法时束手束脚,生怕一不小心就踩到地雷. ...

Vue.js如何在一个页面调用另一个同级页面的方法

实际开发过程中，当前组件调用完方法之后，也许会调取同一级组件中的方法，本人暂时想到两种办法:

1. vm.$on(event,callback)

2. vuex

Vue.js如何在一个页面调用另一个同级页面的方法相关推荐

最新文章

热门文章