Vue在一个页面调用另一个同级页面的方法

最新推荐文章于 2025-04-11 10:23:44 发布
最新推荐文章于 2025-04-11 10:23:44 发布
阅读量7.2k 收藏 13
点赞数 2
分类专栏： Spring Boot + Vue 文章标签： vue方法引用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/thinkingmyself/article/details/100775077
版权

1、建立一个中转站

2、然后在两个页面都引入它，注意引入路径。

import Utils from './testutils.js'

3、调用方的写法

Utils.$emit('demo', 'msg')

4、被调用方的写法

mounted() {
    var that = this
    Utils.$on('demo', function(msg) {
      that.importFile()
    })
  },

参考：API-Vue.js

vue跨页面调用方法
TRTR666的博客
09-16 888
首页要创建一个js的文件；我将其命名为bug.js import Vue from 'vue' export default new Vue() 要操作使用的页面中，直接是 引入bus文件：import bus from “@/utils/bus.js” 使用方法： bus.$emit( 'updateKeyWords' , this.keywords); 接受的页面可以直接在mounted中接受 mounted(){ let _this=this; bus.$on('up.
vue 同级页面调用方法_Vue.js如何在一个页面调用另一个同级页面的方法
weixin_42515448的博客
12-28 8014
使用场景：页面分为header、home、footer三部分，需要在home中调用header中的方法，这两个没有相互引入官方给出方法：需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，看了一下vue的API发现可以用这个方法实现。在项目中实现：1.首先同一个vue实例来调用两个方法。所以可以建立一个中转站。建立 util.js 中转站文件(任意位置,我是在/assets/js/uti...
vue中同级页面之间方法的调用
weixin_40800926的博客
11-06 1675
1.建立中间件：transfer-util.js import Vue from 'vue' export default new Vue(); 2.home与alluserList文件为同级文件，home文件使用alluserList文件的方法，调用相当于home文件，被调用方为alluserList文件，具体写法如下： 两个页面分别引入中间件文件路径： import trans...
vue非父子组件，一个组件调用其他组件的方法
weixin_52190876的博客
03-11 282
vue非父子组件，一个组件调用其他组件的方法
vue中同级页面调用另一个页面的方法
weixin_45102492的博客
12-03 4069
问题： 在vue前端项目开发时，需要从一个页面中调用另一个页面(同级组件)中的方法，这两个页面没有直接的关系，就像是在layout中的头部和内容区域的组件，需要在内容区域操作数据后调用头部组件中的方法。 解决： 在vue中官方已经给提供解决方法了： 下面是我具体的实现 首先创建一个工具随便命名，我的是 siblingCall.js import Vue from "vue" export default new Vue; 在两个同级页面都引入定义的工具 首先在需要调别的组件中的方法的页面 // 首先引入
Vue.js如何在一个页面调用另一个同级页面的方法
06-09
在Vue.js中，同级组件之间可以通过事件总线进行通信。可以在同级组件的共同父级组件中创建一个事件总线，然后在需要调用方法的组件中触发对应的事件，从而实现调用...这样就可以在一个页面调用另一个同级页面的方法了。
vue3同级页面调用方法
03-27
可以使用Vue 3中的Provide/Inject来在同级页面之间共享方法。 例如，在父级组件中定义一个方法： ```javascript export default { provide: { myMethod: () => { console.log('This is my method') } } } ```...
Vue3 父子组件传值相互调用方法,兄弟组件传值相互调用方法
最新发布
weixin_45638884的博客
04-11 1097
fill:#333;color:#333;color:#333;fill:none;父组件子组件1子组件2孙子组件孙子组件。
vue 3.0 组件之间的方法的相互调用
weixin_42331327的博客
08-13 8363
1.父组件调用子组件的方法 给子组件添加 ref 属性 通过 this.$refs.属性名.子组件的函数名 即可触发子组件的函数 2.子组件调用父组件的方法 子组件通过 ==this.$emit(函数名,参数)== 触发父组件的方法。 3.兄弟组件方法的相互调用 子组件1中父组件的方法(this.$emit(函数名,参数)); 通过父组件去触发子组件2的方法（参考：父组件调用子组件的方法） 示例代码如下 // 父组件 <template> <div> <t
Vue同级页面之间调用方法
帅帅的困哒哒
06-12 2767
假设A.vue与B.vue页，A.vue需要调用B.vue页面methods中的test()方法 B.vue methods: { test(){ console.log('hello word！') }, } 方法一：组建公共的js，在src下新建utils目录，新建callUtils.js callUtils.js:只需写这两句即可 import Vue from 'vue' export default new Vue 在A.vue中的点击事件中写
vue-调用同级页面方法
qq_47875931的博客
12-25 573
创建一个公共js文件，例命名为callUtils.js。页面A：引入方法页面（参数data）页面B：被引方法页面（参数data）
vue调用其他页面方法
sqf251877543的博客
06-12 2693
原理： 使用同一个vue实例在A页面监听，在B页面发射 1、新建一个js文件，export 一个 Vue 实例： 2、在page01页面import进刚创建的vue实例，然后在mounted方法里添加监听： 3、在page02页面import进刚创建的vue实例，然后在适当的时候发射： 这样，当page02页面的back方法执行时，Event会发射一个refreshEvent事件，page01页面监听到refreshEvent事件，即可执行page01页面的方法 ...
Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
ParallelLight
05-14 1600
最近有一个登录界面的需求，感觉很简单，尝试各种方法每次都感觉快要成功了，但还是没能解决问题，果然没有系统学习就是很难立刻找到突破点，难以一语中的，好在历经千帆，在页面调用中就解决了这个问题。 需求描述：登录前，顶部导航栏不显示相应tabbar；登录后顶部导航栏显示tabbar。 问题所在：此Vue项目中顶部导航栏Navigate与内容是分开的组件，即界面直接并无关联。 解决需求：需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，根据vue的API发现可以用下面方法实现。 方法描述：实现页面.
VUE同级组件之前方法调用
zhangjie9852的博客
11-22 2205
实现：Index.vue页面调用nav.vue页面里的getLeftMenu()方法 一、首先先建一个公共文件，命名eventBus.js,内空为： import Vue from 'vue' export default new Vue() 二、在Index.vue和nav.vue都import一下eventBus.js公共文件，具体写法 import bus from './co...
vue 两个同级页面中如何调用另一个页面的方法
weixin_45744454的博客
06-29 940
vue 两个同级页面中如何调用另一个页面的方法 1.新建一个js文件 import Vue from 'vue' export default new Vue; 2.两个页面中引入此文件 import util from '../util' 3.如何调用 ①调用方法页面 methonds:{ functionA(){ //函数名字 参数 util.$emit('list','list') } } ②别调用方法页面 methonds:
vue3组合式父页面调用子页面的方法
weixin_44600235的博客
03-20 1001
父页面：produce.vue：第一步定义ref类型 ，然后用定义的actionSheetRef值调用子页面方法 子页面：actionSheet.vue typescript部分：第一步： 重置为1的方法，第二步：显示抛出这个方法
Vue一个页面调用另一个页面的方法
热门推荐
CROSSFIT的博客
03-21 2万+
Vue项目，在一个页面中想调用另一个页面的方法，可以用下面两种方式 方式一 在当前页面引入被调用方法页面 <template> <BPage ref="bPage"/> </template> <scripts> import BPage from './BPage'; export default { compoments: { BPage } methods: { methodA() { //调用页面BPage的方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值