Vue.js Изменить стиль CSS дочернего компонента при наведении

Question

Я создал компонент «box», который я использую несколько раз.У каждого элемента есть событие @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)"

Поскольку i и j изменились, я не знаю, как повлиять только на одного ребенка.

Я знаю, что могу удалить цикл ископируйте и вставьте тот же код, но для этого должно быть другое решение.Я также знаю, что этот конкретный пример может быть реализован непосредственно на дочернем компоненте, но мне нужно иметь возможность сделать это от родителя.

Answer 1

Вы можете сделать это следующим образом:

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

Из документов :

В отличие от компонентов и реквизитов, имена событий никогда не будут использоваться какимена переменных или свойств в JavaScript, поэтому нет причин использовать camelCase или PascalCase.Кроме того, v-on прослушиватели событий внутри шаблонов DOM будут автоматически преобразованы в нижний регистр (из-за нечувствительности к регистру в HTML), поэтому v-on:myEvent станет v-on:myevent, что сделает myEvent невозможным для прослушивания.

По этим причинам мы рекомендуем всегда использовать кебаб-кейс для имен событий.

Интерактивная демонстрация

Vue.component('parent-component', {
  template: '#parent-component',
  data() {
    return {
      defaultStyles: {
        color: '#555',
        borderColor: '#bbb'
      },
      highlightedStyles: {
        color: '#f50',
        borderColor: 'orange'
      },
      highlighted: {x: null, y: null}
    };
  },
  methods: {
    isHighlighted(x, y) {
      return x === this.highlighted.x && y === this.highlighted.y;
    },
    getStyles(x, y) {
      return this.isHighlighted(x, y) ? this.highlightedStyles : this.defaultStyles;
    },
    getColor(x, y) {
      return this.getStyles(x, y).color;
    },
    getBorder(x, y) {
      return this.getStyles(x, y).borderColor;
    },
    highlightBorder(x, y) {
      this.highlighted = {x, y};
    }
  }
});

Vue.component('box-component', {
  template: '#box-component',
  props: ['color', 'borderColor']
});


var vm = new Vue({
  el: '#app'
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row:after {
  content: '';
  display: block;
  clear: both;
}

.box {
  float: left;
  padding: .5em;
  border-width: 4px;
  border-style: solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<div id="app">
  <parent-component></parent-component>
</div>

<template id="parent-component">
  <div>
    <div id="container">
      <div class="row" v-for="y in 11" :key="`row-${y}`">
        <div>
          <box-component
            v-for="x in 7"
            :key="`cell-${x}`"
            :color="getColor(x, y)"
            :border-color="getBorder(x, y)"
            :col="x" :row="y"
            @change-border="highlightBorder(x, y)"
          ></box-component>
        </div>
      </div>
    </div>
  </div>
</template>

<template id="box-component">
  <div
    class="box"
    :style="{background: color, borderColor: borderColor}"
    @mouseenter="$emit('change-border')"
  ></div>
</template>