Vue3组件实现hover事件且避免Props突变的方法

你的问题核心是违反了Vue单向数据流规则：直接修改了组件的prop值。下面提供几种不修改prop就能实现hover效果的方案：

方案1：子组件内部独立维护hover状态（最常用） #

如果hover状态完全是子组件自身的交互需求，不需要父组件参与控制，直接在组件内部声明响应式变量即可：

<template>
  <nav @mouseover="isHover = true" @mouseleave="isHover = false" :class="{ open: isHover }">
    <!-- 导航栏内容 -->
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 内部维护hover状态，与prop完全解耦
const isHover = ref(false);
</script>

方案2：监听prop同步到内部状态（父组件需控制初始状态时用） #

如果需要父组件能传递初始hover状态，或者响应父组件对hover状态的修改，可通过watch监听prop，同步到内部变量：

<template>
  <nav @mouseover="isHover = true" @mouseleave="isHover = false" :class="{ open: isHover }">
    <!-- 导航栏内容 -->
  </nav>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps<{ hover?: boolean }>();
// 初始化内部状态，优先使用父组件传递的prop值
const isHover = ref(props.hover ?? false);

// 监听prop变化，同步更新内部状态
watch(() => props.hover, (newVal) => {
  if (newVal !== undefined) {
    isHover.value = newVal;
  }
});
</script>

方案3：通过emit通知父组件更新prop（双向同步场景用） #

如果需要hover状态在父子组件间双向同步，可通过自定义事件通知父组件修改prop，严格遵循单向数据流：

<template>
  <nav @mouseover="emitHover(true)" @mouseleave="emitHover(false)" :class="{ open: hover }">
    <!-- 导航栏内容 -->
  </nav>
</template>

<script setup lang="ts">
const props = defineProps<{ hover?: boolean }>();
const emit = defineEmits<{
  'update:hover': [value: boolean]
}>();

const emitHover = (value: boolean) => {
  emit('update:hover', value);
};
</script>

父组件使用时可通过v-model:hover简化双向绑定：

<Navbar v-model:hover="parentHover" />

内容的提问来源于stack exchange，提问作者Zoey