我正在做一个 vue 项目，想在一段时间后从子组件向父组件发出一个事件（用户将鼠标悬停在元素上，几秒钟后，发出应该发生）。
我很确定我已经在其他组件中完成了与此类似的发射，并且它以前工作过，但现在我得到了这两个错误。我不确定发生了什么变化。我在第一次尝试后实施了 vuex，回到这个，现在我不确定发生了什么？但也许我只是删除了一些东西或者我不知道。 我还在似乎有问题的行上方尝试了一个控制台日志，并且该值似乎不为空。 这些是我得到的错误：
[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, …}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>
感谢您对这种奇怪行为的帮助。用按钮测试发射器后仍然无法正常工作，我认为这非常可疑。 为了确定，我查看了父组件，因为当子组件发出事件时，我在那里执行了一个函数。 当我查看该功能时，我有以下几行：
this.socket.emit('fetch_available_uis', { device_name: device });
这里是错误描述！因为正如我所说，我包含了 Vuex，然后它就不再工作了。添加vuex时，我也将socket连接移到了store，所以现在确实没有this.socket或者更好的说是上面提到的null值。 我修复了这一行，现在错误消失了！
所以对于将来遇到类似问题的其他人，我建议查看接收您孩子事件的父母中的功能并检查那里的错误。因为即使错误在父级中，错误消息仍然显示在子级中发现了错误，可能是因为它将发出事件的组件作为源，而不是上面的组件。
我认为是的原因可能来自您建议的行。
this.countdownthisthis.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
},
对于任何从
TypeError: Cannot read properties of null (reading 'emitsOptions')在我的例子中，我使用了
toRaw()vueimport { toRaw } from 'vue';