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

最新推荐文章于 2024-03-20 17:27:14 发布
原创 最新推荐文章于 2024-03-20 17:27:14 发布 · 7.2k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue方法引用

本文介绍了一种Vue组件间通信的方法，通过创建一个中转站并利用$emit和$on进行消息传递，实现非父子组件间的高效通信。

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

Vue3 父子组件传值相互调用方法,兄弟组件传值相互调用方法
weixin_45638884的博客
04-11 1486
fill:#333;color:#333;color:#333;fill:none;父组件子组件1子组件2孙子组件孙子组件。
vue中同级页面之间方法的调用
weixin_40800926的博客
11-06 1696
1.建立中间件：transfer-util.js import Vue from 'vue' export default new Vue(); 2.home与alluserList文件为同级文件，home文件使用alluserList文件的方法，调用相当于home文件，被调用方为alluserList文件，具体写法如下： 两个页面分别引入中间件文件路径： import trans...
vue中同级页面调用另一个页面的方法
weixin_45102492的博客
12-03 4116
问题： 在vue前端项目开发时，需要从一个页面中调用另一个页面(同级组件)中的方法，这两个页面没有直接的关系，就像是在layout中的头部和内容区域的组件，需要在内容区域操作数据后调用头部组件中的方法。 解决： 在vue中官方已经给提供解决方法了： 下面是我具体的实现 首先创建一个工具随便命名，我的是 siblingCall.js import Vue from "vue" export default new Vue; 在两个同级页面都引入定义的工具 首先在需要调别的组件中的方法的页面 // 首先引入
vue 同级页面调用方法_Vue.js如何在一个页面调用另一个同级页面的方法
weixin_42515448的博客
12-28 8109
使用场景：页面分为header、home、footer三部分，需要在home中调用header中的方法，这两个没有相互引入官方给出方法：需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，看了一下vue的API发现可以用这个方法实现。在项目中实现：1.首先同一个vue实例来调用两个方法。所以可以建立一个中转站。建立 util.js 中转站文件(任意位置,我是在/assets/js/uti...
Vue同级页面之间调用方法
帅帅的困哒哒
06-12 2803
假设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.js如何在一个页面调用另一个同级页面的方法
06-09
在Vue.js中，同级组件之间可以通过事件总线进行通信。可以在同级组件的共同父级组件中创建一个事件总线，然后在需要调用方法的组件中触发对应的事件，从而实现调用...这样就可以在一个页面调用另一个同级页面的方法了。
vue3同级页面调用方法
03-27
可以使用Vue 3中的Provide/Inject来在同级页面之间共享方法。 例如，在父级组件中定义一个方法： ```javascript export default { provide: { myMethod: () => { console.log('This is my method') } } } ```...
vue3引用某一个页面，想要使用这个页面的方法
最新发布
07-26
1. 理解问题：解释在Vue 3中如何调用另一个页面的方法。 2. 提供解决方案：基于Vue 3的特性，如Composition API、事件总线、Provide/Inject等。 3. 使用代码示例：给出Vue 3的代码，因为用户提到Vue 3。 4. 参考引用...
vue同级组件间方法调用
11-24
在Vue中，同级组件之间的方法调用可以通过事件总线(Event Bus)来实现。事件总线是一个空的Vue实例，可以用它来触发事件和监听事件。具体实现步骤如下： 1.在main.js中创建事件总线： ```javascript Vue.prototype....
vue-调用同级页面方法
qq_47875931的博客
12-25 610
创建一个公共js文件，例命名为callUtils.js。页面A：引入方法页面（参数data）页面B：被引方法页面（参数data）
vue调用其他页面方法
sqf251877543的博客
06-12 2729
原理： 使用同一个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 1643
最近有一个登录界面的需求，感觉很简单，尝试各种方法每次都感觉快要成功了，但还是没能解决问题，果然没有系统学习就是很难立刻找到突破点，难以一语中的，好在历经千帆，在页面调用中就解决了这个问题。 需求描述：登录前，顶部导航栏不显示相应tabbar；登录后顶部导航栏显示tabbar。 问题所在：此Vue项目中顶部导航栏Navigate与内容是分开的组件，即界面直接并无关联。 解决需求：需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，根据vue的API发现可以用下面方法实现。 方法描述：实现页面.
VUE同级组件之前方法调用
zhangjie9852的博客
11-22 2244
实现：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 978
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 1125
父页面：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的方法
vue不同页面之间方法调用
xingchenyv的博客
10-11 3191
el-tab-pane切换页面实现页面数据实时更新
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值