Vue.js在懸停時更改子組件的css樣式

Question

我創建了一個我多次重復使用的“盒子”組件。 每個元素都有一個父級監聽的@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。 此外，DOM 模板中v-on事件偵聽器將自動轉換為小寫（由於 HTML 不區分大小寫），因此v-on:myEvent將變為v-on:myevent - 使myEvent無法偵聽。

由於這些原因，我們建議您始終使用 kebab-case 作為事件名稱。

互動演示

 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>