如何从JS/TS类向Vue组件传递数据？（Options API）

在DigitizePolygonInteractions.js的digitize()方法中，我设置了drawEvt.on('drawend')事件监听，希望在drawend事件触发时，将this.wktRepresenation这类数据传递给另一个.vue组件。请问是否可以实现从JS类向Vue组件传递数据？具体该如何操作？

备注
我使用的是Options API

DigitizePolygonInteractions.js

export class DigitizePolygonInteractions extends MapBuilder {
/**
 *
 * @param {*} moduleName string represents the id of the html tag <div id=""></div>, in which the map will be visualized.
 * @param {*} mapInstance instance of the map object that on which digitization will be performed.
 */
constructor(moduleName, mapInstance) {
    super(moduleName);
    this.mapBuilderInstance = this;
    this.mapInstance = mapInstance;
    this.wktRepresenation = undefined;
    this.geoJSONRepresentation = undefined;
    this.layersCollector = new Array();
    this.interactionsEvtsCollector = new Array();
}

digitize() {
    if (this.layersCollector && this.layersCollector.length > 0) {
        this.removeCollectedLayers();
    }

    if (this.interactionsEvtsCollector && this.interactionsEvtsCollector.length > 0) {
        this.removeCollectedInteractionsEvts();
    }

    const source = this.mapBuilderInstance.getVectorSource();
    const rasterLayer = this.mapBuilderInstance.getRasterLayer();
    const vectorLayer = this.mapBuilderInstance.getVectorLayerFor(source, olColors.RGB_RED_LAVA, olColors.RGB_DIRTY_BLUE, 1, olColors.RGB_DIRTY_BLUE);
    const modifyEvt = this.mapBuilderInstance.getModifyGeomForSource(source);
    const drawEvt = this.mapBuilderInstance.getDrawGeomForSource(source, 'Polygon');
    const snapEvt = this.mapBuilderInstance.getSnapGeomForSource(source);
    this.mapInstance = this.mapBuilderInstance.addLayer(this.mapInstance, rasterLayer);
    this.mapInstance = this.mapBuilderInstance.addLayer(this.mapInstance, vectorLayer);
    this.mapInstance = this.mapBuilderInstance.addInteractionEvtToMap(this.mapInstance, modifyEvt);
    this.mapInstance = this.mapBuilderInstance.addInteractionEvtToMap(this.mapInstance, drawEvt);
    this.mapInstance = this.mapBuilderInstance.addInteractionEvtToMap(this.mapInstance, snapEvt);

    this.layersCollector.push(rasterLayer);
    this.layersCollector.push(vectorLayer);
    this.interactionsEvtsCollector.push(modifyEvt);
    this.interactionsEvtsCollector.push(drawEvt);
    this.interactionsEvtsCollector.push(snapEvt);

    drawEvt.on('drawend', e => {
        let feature = e.feature;
        let geom = feature.getGeometry();
        let wktformat = new WKT();
        let geoJSONformat = new GeoJSON();
        let wktRepresenation = wktformat.writeGeometry(geom);
        let geoJSONRepresentation = geoJSONformat.writeGeometry(geom);
        this.wktRepresenation = wktRepresenation;
        this.geoJSONRepresentation = geoJSONRepresentation;
        console.info(debugTag, 'drawEvt.on' + 'wktRepresenation:', this.wktRepresenation);
        console.info(debugTag, 'drawEvt.on' + 'geoJSONRepresentation:', this.geoJSONRepresentation);
    });
    return this.mapInstance;
}
}

完全可以实现JS类向Vue组件传递数据，针对你的场景，推荐以下几种实用方案：

方案一：通过自定义事件传递 #

在JS类中触发全局自定义事件，Vue组件监听该事件接收数据。

步骤1：修改JS类触发事件 #

在drawend回调中添加自定义事件触发逻辑：

drawEvt.on('drawend', e => {
    // 原有数据处理代码
    this.wktRepresenation = wktRepresenation;
    this.geoJSONRepresentation = geoJSONRepresentation;
    
    // 触发自定义事件，携带数据
    const polygonDataEvent = new CustomEvent('polygon-draw-complete', {
        detail: {
            wkt: this.wktRepresenation,
            geoJSON: this.geoJSONRepresentation
        }
    });
    window.dispatchEvent(polygonDataEvent);
});

步骤2：Vue组件监听事件 #

在Vue组件的生命周期钩子中绑定/解绑事件监听：

<script>
export default {
    data() {
        return {
            polygonWkt: '',
            polygonGeoJSON: ''
        }
    },
    mounted() {
        window.addEventListener('polygon-draw-complete', this.handlePolygonData);
    },
    beforeUnmount() {
        window.removeEventListener('polygon-draw-complete', this.handlePolygonData);
    },
    methods: {
        handlePolygonData(event) {
            this.polygonWkt = event.detail.wkt;
            this.polygonGeoJSON = event.detail.geoJSON;
            // 执行后续业务逻辑
        }
    }
}
</script>

方案二：通过实例回调传递数据 #

如果Vue组件中直接实例化了DigitizePolygonInteractions类，可以给类实例绑定回调函数，事件触发时直接调用回调传递数据。

步骤1：修改JS类支持回调 #

修改构造函数或新增方法接收回调：

// 方式1：构造函数接收回调
constructor(moduleName, mapInstance, onDrawComplete) {
    super(moduleName);
    // 原有初始化代码
    this.onDrawComplete = onDrawComplete;
}

// 方式2：新增方法设置回调
setOnDrawComplete(callback) {
    this.onDrawComplete = callback;
}

在drawend回调中调用回调：

drawEvt.on('drawend', e => {
    // 原有数据处理代码
    this.wktRepresenation = wktRepresenation;
    this.geoJSONRepresentation = geoJSONRepresentation;
    
    // 调用回调传递数据
    if (typeof this.onDrawComplete === 'function') {
        this.onDrawComplete({
            wkt: this.wktRepresenation,
            geoJSON: this.geoJSONRepresentation
        });
    }
});

步骤2：Vue组件绑定回调 #

在Vue组件中实例化类并传入回调：

<script>
import { DigitizePolygonInteractions } from './DigitizePolygonInteractions.js';

export default {
    data() {
        return {
            polygonWkt: '',
            polygonGeoJSON: '',
            digitizeInstance: null
        }
    },
    mounted() {
        // 实例化时传入回调
        this.digitizeInstance = new DigitizePolygonInteractions('map-container', this.mapInstance, this.handlePolygonData);
        this.digitizeInstance.digitize();
        
        // 或者后续通过方法设置回调
        // this.digitizeInstance.setOnDrawComplete(this.handlePolygonData);
    },
    methods: {
        handlePolygonData(data) {
            this.polygonWkt = data.wkt;
            this.polygonGeoJSON = data.geoJSON;
        }
    }
}
</script>

方案三：使用Vue事件总线 #

创建全局Vue事件总线，JS类通过总线触发事件，组件监听事件接收数据。

步骤1：创建事件总线 #

新建eventBus.js文件：

import Vue from 'vue';
export const eventBus = new Vue();

步骤2：JS类中触发事件 #

引入事件总线并触发事件：

import { eventBus } from './eventBus.js';

// 原有代码
drawEvt.on('drawend', e => {
    // 原有数据处理代码
    this.wktRepresenation = wktRepresenation;
    this.geoJSONRepresentation = geoJSONRepresentation;
    
    // 通过事件总线传递数据
    eventBus.$emit('polygon-draw-complete', {
        wkt: this.wktRepresenation,
        geoJSON: this.geoJSONRepresentation
    });
});

步骤3：Vue组件监听事件 #

在Vue组件中引入总线并监听：

<script>
import { eventBus } from './eventBus.js';

export default {
    data() {
        return {
            polygonWkt: '',
            polygonGeoJSON: ''
        }
    },
    mounted() {
        eventBus.$on('polygon-draw-complete', this.handlePolygonData);
    },
    beforeUnmount() {
        eventBus.$off('polygon-draw-complete', this.handlePolygonData);
    },
    methods: {
        handlePolygonData(data) {
            this.polygonWkt = data.wkt;
            this.polygonGeoJSON = data.geoJSON;
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者Amrmsmb