VueJS 事件处理

Question

我正在使用 VueJS 测试发射和监听方法以了解如何使用它。我得到了一些奇怪的结果，我不明白。我希望我的函数 initMap() 被调用并且控制台正在记录日志，它确实如此，但错误出现在顶部。

Uncaught TypeError: Cannot read property 'apply' of undefined
    at Vue$3.Vue.$emit (vue.js:2186)
    at Vue$3.emit (main.js:131)
    at Vue$3.boundFn [as emit] (vue.js:167)
    at Vue$3.fire (main.js:146)
    at Vue$3.boundFn [as fire] (vue.js:167)
    at Vue$3.initMap (main.js:93)
    at Vue$3.boundFn [as initMap] (vue.js:168)
    at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:98
    at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
    at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
Vue.$emit @ vue.js:2186
emit @ main.js:131
boundFn @ vue.js:167
fire @ main.js:146
boundFn @ vue.js:167
initMap @ main.js:93
boundFn @ vue.js:168
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:98
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
Sc @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:55
Rc.eb @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:141

发送

import GISView from './components/GISView.vue';
import VueEvents from 'vue-events';

window.Vue = Vue;
Vue.use(VueEvents)

var App = window.App = new Vue({
  el: '#app',
  components: {
    gisview: GISView
  },
  methods: {
    initMap: function() {
      this.$events.fire("MapLoaded");
    }
  }
});

听力

<template>
    <div ref="map" id="map" class="google-map" style="position: relative; overflow: hidden;">
        <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;">

        </div>
    </div>
</template>
<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],

        data() {
            return {
                map: ''
            }
        },

        mounted() {
            this.$events.$on("MapLoaded", this.initMap());
        },

        methods: {
            initMap: function() {
                console.log("OK");
            }
        }
    }
</script>

Answer 1

mounted() {
            this.$events.$on("MapLoaded", this.initMap());
        }

您需要删除 initMap 方法调用末尾的大括号。所以：

mounted() {
                this.$events.$on("MapLoaded", this.initMap);
            }