Vue开发中mouseover事件无法切换hover状态问题咨询

问题根源 #

1. 插槽作用域传递的hover是子组件的ref实例本身，你直接在模板中写hover = !hover是对当前插槽作用域内的变量重新赋值，没有修改ref实例的value属性，自然不会触发响应式更新。
2. 使用mouseover搭配取反逻辑不稳定，mouseover会在鼠标移入元素子节点时重复触发，容易导致状态异常跳动。

修复方案 #

推荐用单向数据流的方式修改，避免直接跨作用域修改响应式变量：

1. 先在子组件中暴露修改hover状态的方法，通过插槽传递给父级
   修改后的子组件代码：

<template lang="pug">
slot(:toggled="toggled" :toggle="toggle" :hover="hover" :setHover="setHover")
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const toggled = ref(false)
    const hover = ref(false)
    function toggle() {
      toggled.value = !toggled.value
    }
    // 新增修改hover状态的方法
    function setHover(val) {
      hover.value = val
    }
    
    return { toggled, toggle, hover, setHover }
  }
}
</script>

2. 父级插槽中使用配对的鼠标事件调用方法修改状态，逻辑更稳定
   修改后的父级模板代码：

template(#default="{ toggle, toggled, hover, setHover }")
  .flex(@click="toggle" @mouseenter="setHover(true)" @mouseleave="setHover(false)")
    box-icon(type="solid" name="chevron-down" v-if="hover")

如果不想新增方法，也可以直接修改ref的value属性临时修复：

template(#default="{ toggle, toggled, hover }")
  .flex(@click="toggle" @mouseenter="hover.value = true" @mouseleave="hover.value = false")
    box-icon(type="solid" name="chevron-down" v-if="hover")

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