Javascript Vue.js更改悬停时子组件的css样式

我创建了一个“盒子”组件，我重复使用了好几次。每个元素都有父元素侦听的@mouseenter事件。我的目标是更改子元素的边框颜色。因为我使用循环从父级声明了，所以我不能只更改子级的一个属性，但它们都会更改

<template>
<div>
  <div id="container">
    <div id="row" v-for="i in 11" :key="i">
      <div>
        <box-component v-for="j in 7" :key="j" :color="getColor(i, j)" v-bind:borderColor="getBorder(i, j)" :row="i" :col="j" v-on:changeBorder="highlightBorder($event)"></box-component>
      </div>
    </div>
  </div>
</div>
</template>

这部分的问题在于：

v-bind:borderColor=“getBorder（i，j）”

因为我和j已经改变了，我不知道如何只影响一个孩子

---

我知道我可以删除循环并复制粘贴相同的代码，但必须有另一种解决方案。我也知道这个特定的示例可以直接在子组件上实现，但我需要能够从父组件上实现它。

您可以这样做：

<box-component v-on:change-border="highlightBorder(i, j)"></box-component>

*{
保证金：0；
填充：0；
框大小：边框框；
}
.罗：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.盒子{
浮动：左；
填充：.5em；
边框宽度：4px；
边框样式：实心；
}

---

您可以这样做：

<box-component v-on:change-border="highlightBorder(i, j)"></box-component>

*{
保证金：0；
填充：0；
框大小：边框框；
}
.罗：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.盒子{
浮动：左；
填充：.5em；
边框宽度：4px；
边框样式：实心；
}

谢谢你的回答，它帮了我很多忙！我没有意识到我可以用钥匙做到这一点，现在我将能够推进项目。很抱歉没有发布其余的代码，这本可以为您节省一点时间。谢谢您的回答，它帮了我很多忙！我没有意识到我可以用钥匙做到这一点，现在我将能够推进项目。很抱歉，没有发布其余的代码，这本可以为您节省一点时间。