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);
            }

Answer 2

在“方法”之外声明的处理程序也有类似的问题。

为了清楚起见，这是行不通的

export default {
    name: 'app',
    created() {
        EventBus.$off('change-tab');
        EventBus.$on('change-tab', this.changeTab);
    },
    changeTab( newTab) {
        // do something smart
    },
}

虽然这是可行的

export default {
    name: 'app',
    created() {
        EventBus.$off('change-tab');
        EventBus.$on('change-tab', this.changeTab);
    },
    methods : {
        changeTab( newTab) {
            // do something smart
        },
    }
}

Answer 3

在我的例子中，这是当我忽略了this.$root.$emit('someEvent')中的第二个参数时发生的。

消除误差的是this.$root.$emit('someEvent', {})；

然而，由于这一点，我想要的任何一个反应性在$on函数中都没有中断。

我想说的是

handleScroll() {
  //   console.log(e);
  this.$root.$emit("bodyScroll", {});
},

在另一个组件中。

 data() {
    return {
      scroll: false
    };
  },
 mounted() {
    this.$root.$on("bodyScroll", data => {
      console.log("Receiving events", data);
      this.scroll = true;
    });
  },

因此，基本上，尽管出现了错误，滚动事件仍然有效。