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

最新推荐文章于 2024-07-10 17:41:50 发布

转载最新推荐文章于 2024-07-10 17:41:50 发布 · 5.1k 阅读

文章标签：

#vue

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍了一种在Vue应用中实现非父子组件间通信的方法，通过创建一个公用的Vue实例作为中转站，使得不同组件可以相互通信，解决了展示页调用顶部导航栏方法的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，看了一下vue的API发现可以用这个方法实现。

https://cn.vuejs.org/v2/api/#vm-on

可以看到需要同一个vue实例来调用两个方法。所以可以建立一个中转站。

首先在任意位置新建util.js文件。


 
   
    
   
   
    
     import Vue 
     from 
     'vue'
    
   

   
    
   
   
    
     export 
     default 
     new Vue

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

 import Utils from '../utils.js';

然后是调用方：


 
   
    
   
   
    
     methods: {
    
   

   
    
   
   
    
         functionA() {
    
   

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

   
    
   
   
    
         }
    
   

   
    
   
   
    
     }

最后是被调用方：


 
   
    
   
   
    
         mounted(){
    
   

   
    
   
   
          
     var that = 
     this;
    
   

   
    
   
   
    
           Utils.$on(
     'demo', 
     function (msg) {
    
   

   
    
   
   
            
     console.log(msg);
    
   

   
    
   
   
    
             that.functionB();
    
   

   
    
   
   
    
           })
    
   

   
    
   
   
    
         },
    
   

   
    
   
   
        
     methods: {
    
   

   
    
   
   
    
             functionB() {
    
   

   
    
   
   
    
                 ...
    
   

   
    
   
   
    
             }
    
   

   
    
   
   
    
         }