Question

我正在使用VueJS测试emit和listen方法，以学习如何使用它。我得到了一些奇怪的结果，我不明白。我希望我的函数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;
    });
  },

因此，尽管发生了错误，但是基本上滚动事件仍然有效。

VueJS事件处理

3 个答案: