Error in v-on handler: "TypeError: Cannot read property 'emit' of null

Question

我正在做一个 vue 项目，想在一段时间后从子组件向父组件发出一个事件（用户将鼠标悬停在元素上，几秒钟后，发出应该发生）。

我很确定我已经在其他组件中完成了与此类似的发射，并且它以前工作过，但现在我得到了这两个错误。我不确定发生了什么变化。我在第一次尝试后实施了 vuex，回到这个，现在我不确定发生了什么？但也许我只是删除了一些东西或者我不知道。我还在似乎有问题的行上方尝试了一个控制台日志，并且该值似乎不为空。这些是我得到的错误：

[Vue 警告]：v-on 处理程序错误："TypeError: Cannot read property 'emit' of null" 之后出现错误 无法读取属性 'emit' of null 第一个错误提到，错误是在组件中发现的，如下所示。

我看到的大多数与此问题相关的内容都是关于人们错误地执行 es6 箭头功能，所以 this.timer = setInterval(() => this.countdown(), 1000); 可能有问题吗？我不太确定。

这里是组件（请原谅乱七八糟的代码）：

<template>
    <div
        :id="id"
        class="board"
        @dragenter.prevent
        @dragover.prevent
        @drop.prevent="drop"
        @dragenter="dragenter($event)"
        @dragover="dragover($event)"
        @dragleave="dragleave($event)"
    >
        <slot class="row"/>
        <div
        :id="`ui-details-${id}`"
        v-show="extendedHover">
        Long hover
        </div>
    </div>
</template>

<script>
export default {
  name: 'Devices',
  props: ['id', 'acceptsDrop'],
  data() {
    return {
      extendedHover: false,
      timer: null,
      totalTime: 2,
    };
  },
  methods: {
    drop(e) {
      if (e.dataTransfer.getData('type') === 'layout') { // only accept dropped cards, not boards
        const layoutId = e.dataTransfer.getData('layout_id');
        this.$emit('dropped-layout', layoutId);
      }
      clearInterval(this.timer);
      this.timer = null;
      this.totalTime = 2;
      console.log(e.dataTransfer.getData('card_id'));
      e.target.classList.remove('hover-drag-over');
      this.extendedHover = false;
      // this.$emit('cancel-hover');
      console.log('-------------dropped');
      console.log(e);
      console.log(e.dataTransfer.getData('type'));
      /* const cardId = e.dataTransfer.getData('card_id');
      console.warn('dropped onto device');
      this.$emit('dropped-component', cardId);
      e.target.classList.remove('hover-drag-over'); */
    },
    dragenter(e) {
      // on dragenter we start a countdown of 1s
      // over this value --> we see it as a long hover
      console.log('------------dragenter');
      console.log(e);
      this.timer = setInterval(() => this.countdown(), 1000);
    },
    dragover(e) {
      if (this.acceptsDrop) {
        e.target.classList.add('hover-drag-over');
      }
    },
    dragleave(e) {
      if (this.acceptsDrop) {
        clearInterval(this.timer);
        this.timer = null;
        this.totalTime = 2;
        e.target.classList.remove('hover-drag-over');
        this.extendedHover = false;
        // this.$emit('cancel-hover');
      }
    },
    countdown() {
      this.totalTime -= 1;
      if (this.totalTime === 0) {
        this.extendedHover = true;
        console.warn(this);
        this.$emit('long-hover'); //this is the problematic line
      }
    },
  },
};
</script>

<style scoped>
    .board{
        width: 100%;
        min-height: 200px;
    }
</style>

感谢您的帮助！

编辑： console.log 的输出如下 VueComponent {_uid: 18, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} 如果需要，可以扩展以获取更多信息。

Edit2：这个组件是根据父组件中的数组生成的，就像这样。所以插槽现在只填充一个字符串。

<div
                class = "col-4"
                v-for="(device, index) in devices"
                v-bind:key="`device-${device.ip}`"
            >
                <Devices
                :id="`board-${device.ip}`"
                v-bind:class="{'droparea-device':true, 'your-device': (index === thisDeviceIndex)}"
                @dropped-layout="$emit('dropped-layout', $event, index)"
                @long-hover="fetchAvailableUIsForDevice(device.device_name)"
                @cancel-hover="cancelHover()"
                :acceptsDrop=true
                >
                {{device.device_name}}
                </Devices>
            </div>

编辑3：对于测试，我也只是想尝试一个非常基本的东西。所以我添加了一个带有这样的点击事件的按钮（但仍然有错误）：

 <b-button
        type="button"
        variant="success"
        v-on:click="$emit('long-hover')"
        >
          Control Center
        </b-button>

Answer 1

我认为是的原因可能来自您建议的行。 this.countdown 指向任何地方，因为这里的 this 指针不属于 Vue

this.timer = setInterval(() => this.countdown(), 1000);

修复，建议你试试

dragenter(e) {
      // on dragenter we start a countdown of 1s
      // over this value --> we see it as a long hover
      console.log('------------dragenter');
      console.log(e);
      let vm = this;  // assign Vue this to vm
      this.timer = setInterval(() => vm.countdown(), 1000); // use vm instead of this
    },

Answer 2

非常感谢您对这种奇怪行为的帮助。用按钮测试发射器后仍然无法正常工作，我认为这非常可疑。为了确定，我查看了 parent 组件，因为当 child 发出事件时，我在那里执行了一个函数。当我查看该函数时，我有以下行：

this.socket.emit('fetch_available_uis', { device_name: device });

这里的错误描述装好了！因为正如我所说，我包含了 Vuex，然后它就不再工作了。添加 vuex 时，我也将套接字连接移到了商店，所以现在确实没有 this.socket 或更好地说上面提到的空值。我修复了这一行，现在错误消失了！

因此，对于以后遇到类似问题的其他人，我建议查看 parents 中接收您的 childs 事件的函数，并检查那里的错误。因为即使错误在 parent 中，错误消息仍然显示在 child 中发现错误可能是因为它以发出事件的组件作为源而不是上面的组件.

Error in v-on handler: "TypeError: Cannot read property 'emit' of null

Error in v-on handler: "TypeError: Cannot read property 'emit' of null

javascript

vue.js

events

components

emit