javascript：如何在 vue ref 中绑定 mouseover 事件答案

【问题标题】：javascript: how to bind mouseover event in vue refjavascript：如何在 vue ref 中绑定 mouseover 事件
【发布时间】：2021-10-29 10:54:51
【问题描述】：

我想知道如何使用$ref从模板中消除 mouseOver 事件。我想在 javascript 中控制 mouseOver 行为。

Components 组件有 myStats 子组件。 myStats 应该只在我将鼠标悬停在 Components 上时显示。

我不知道如何让ref 做被注释掉的模板代码所做的事情。
我必须使用myStats (= onMouseEvent) 的函数吗？如果我只能在Components 内部控制mouseOver 会更容易

Components代码：

<template>
  <div class="pv-lookup" ref="myStats">
    <!-- I would like to get rid of the commented out mouse hover event code below by using $ref: -->
    <!-- <div @mouseover="mouseOver = true" @mouseout="mouseOver = false"> -->
    <div>
      <someComponent1 />
      <someComponent2 />
      <myStats v-if="mouseOver" @mouseMoved="onMouseMoved"/>
    </div>
  </div>
</template>

<script>
export default class Components extends Vue {
  public mouseOver = false;

  @Emit()
  public onMouseMoved() {
    this.mouseOver = !this.mouseOver;
  }

  mounted() {
    this.$nextTick(() => {
      if (this.isInhouseClient || this.isInhouse) {
        // TODO: set value for this.mouseOver

        // Approach 1:
        // ERROR: Property 'onMouseEvent' does not exist on type 'Vue | Element | Vue[] | Element[]'.
        this.$refs.myStats.onMouseEvent();

        // Approach 2:
        // ERROR: Property 'onMouseEvent' does not exist on type 'MouseEvent'. Did you mean 'initMouseEvent'?
        const myStats= this.$refs.myStatsas HTMLElement;
        myStats.addEventListener("mouseover", function( event ) {
          event.onMouseEvent();
        }, false);
        
        // Approach 3:
        // It's the simplest, but how do I connect with 'ref'?
        this.mouseOver = !this.mouseOver;
      }
    });
  }
}
</script>

myStats 代码：

<script>
export default class myStats extends Vue {
  public mouseOver: boolean = false;

  @Emit()
  public mouseMoved(){}
  
  public onMouseEvent() {
    this.mouseMoved();
  }
}
</script>

感谢您的见解

【问题讨论】：

似乎是 XY 问题。为什么模板中的事件监听器有问题？
我省略了实际代码的许多部分。这个组件与许多客户端无关，所以我不想在这种情况下总是触发 vue 反应性。我只想在 javascript 中为相关客户控制它（如果为了简单起见，这篇文章中省略了这个条件的声明）

标签： javascript vue.js dom-events ref

【解决方案1】：

您可以简单地将相同事件（mouseover 和mouseout）的事件侦听器添加到 DOM 元素。但请注意，这些事件是从孩子那里冒出来的。在您的情况下，最好使用mouseenter 和mouseleave。

所以你的代码将是：

  mounted() {
    const myStatsEl = this.$refs.myStats; // get DOM element of the component Components
    myStatsEl.addEventListener("mouseenter", (event) => {
      this.mouseOver = true;
    });

    myStatsEl.addEventListener("mouseleave", (event) => {
      this.mouseOver = false;
    });
  },

无需从 myStats 组件发出事件或使用其功能。

话虽如此，正确的“Vue 方式”是使用@mouseenter 和@mouseleave，这样更简洁。我不确定你为什么不想使用它。我想不出这种方式可能会受到限制的任何情况。

【讨论】：