vue eventBus使用

Posted 2021-10-23 sanqianjin

类似于iframe之间的possMessage方式传参

1、eventBus.js文件

//用于兄弟组件通信
import Vue from ‘vue‘;
export default new Vue();

 

2、页面开启监控

import Bus from ‘../../../eventBus.js‘

mounted(){
        //被调用方法，先保存数据，在回调方法
        var _this = this;
        Bus.$off(‘ComputeSubStep‘);
        Bus.$on(‘ComputeSubStep‘, function (callback) {
            _this.DefaultDataCommon(function () {
                if (typeof callback == "function") {
                    callback();
                }
            });
        });
},

 

3、其他页面调用

    methods: {
　　　　 //页面转被跳转，调用兄弟组件方法　
        ComputeStep(expoolid, exid, index){
            var _this = this;
            Bus.$emit(‘ComputeSubStep‘, function () {
                _this.$router.push({path: `/ComputeStep/${expoolid}/${exid}/${index}`})
            });
        },
    }