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

我很确定我在其他组件中做过类似的发出，并且以前也成功过，但现在我收到这两个错误。我不确定发生了什么变化。我在第一次尝试后实现了 vuex，然后又回到了这个问题，现在我不确定发生了什么？但也许我只是删除了一些东西，或者我不知道。 我还尝试了一条似乎有问题的线上方的控制台日志，那里的 this 值似乎不为空。 这些是我收到的错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取 null 的属性‘emit’” ，之后是错误 无法读取 null 的属性‘emit’ ，第一个错误提到，错误出现在组件中，如下所示。

我看到的与此问题相关的大多数内容都是关于人们错误地执行 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, …> 如果需要，可以扩展以获取更多信息。

编辑 2：此组件根据父组件中的数组生成，如下所示。因此，该插槽目前仅用字符串填充。

<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>