0
点赞
收藏
分享

微信扫一扫

vue 利用$on和$emit进行页面间的跨组件传值和调用

一世独秀 2022-04-15 阅读 89

实现目标:两个vue页面没有任何关联,其中vue1页面要调用vue2中的方法。

实现代码:

中间存储实体:

在utils下新建dataCenterBus.js文件

import Vue from 'vue';
export default new Vue();

vue1页面:(调用vue2页面中的方法)

首先引入中间实体文件

import dataCenterBus from '@/utils/dataCenterBus';

在需要调用所需方法处采用$emit引用

引号中为两个vue文件中共同定义的方法名,第二个参数为引用方法所需要传递的参数

dataCenterBus.$emit('xxxxx', xxx);

vue2页面:(提供方法的页面)

首先引入中间实体文件

import dataCenterBus from '@/utils/dataCenterBus';

在mounted处采用$on引用

引号中为两个vue文件中共同定义的方法名,index为传递的参数名,this.clickTopBtn为该页面需要传递的方法,方法名后的index为方法传递的参数。

mounted() {
        dataCenterBus.$on('xxxxx', index => {
            this.clickTopBtn(index);
        });
    },

注:两个vue页面都要引入中间实体dataCenterBus.js文件。

举报

相关推荐

0 条评论