Vue一个页面调用另一个页面的方法

2023-08-07 03:02| 来源: 网络整理| 查看: 265

Vue项目，在一个页面中想调用另一个页面的方法，可以用下面两种方式方式一在当前页面引入被调用方法页面

import BPage from './BPage'; export default { compoments: { BPage } methods: { methodA() { //调用页面BPage的方法 this.$refs.bPage.methodB(); } } }

使用这种方式可以通过this.$refs.bPage.property1 = ‘aa’的语句来修改页面BPage的属性值方式二在调用方法页面和被调用方法页面同时引入中间js，通过中间js来进行方法调用将中间js命名为MiddleUtil.js，代码为

import Vue from 'vue'; Export default new Vue;

被调用方法页面代码

import MiddleUtil from '../util/MiddleUtil'; export default { data() { return { property1: '' } } methods: { methodB(data) { if (data) this.property1 = data; } } mounted: { let _this = this; MiddleUtil.$on('methodB',(data)=> { _this.methodB(data); }) } }

调用方法页面代码

import MiddleUtil from '../util/MiddleUtil'; export default { methods: { methodA() { let data = { a: '嘿嘿', b: '哈哈' } MiddleUtil.$emit('methodB',data); } } }

【本文地址】

公司简介

联系我们