vue子元素的mouseenter如何不触发父元素的mouseenter

在Vue.js中，如果你想要阻止子元素的`mouseenter`事件向上冒泡并触发父元素的`mouseenter`，你可以使用`event.stopPropagation()`方法。这个方法会阻止当前事件继续传播到其祖先节点。

例如，在HTML模板中，假设你有一个父组件`ParentComponent`有一个`<child>`子组件：

<template>
  <div @mouseenter="handleParentEnter">
    <child @mouseenter.prevent="handleChildEnter"></child>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentEnter() {
      console.log('Parent enter');
    },
    handleChildEnter(e) {
      e.stopPropagation(); // 阻止事件向上冒泡
      console.log('Child enter');
    }
  }
};
</script>

在这个例子中，当你在`child`组件上点击并进入，`handleChildEnter`会被调用，并且事件不会传递给`ParentComponent`的`handleParentEnter`方法。因此，只有当直接在`parent`元素上触发`mouseenter`时，才会执行`handleParentEnter`。