如何將道具傳遞給Vue.js中的父組件

Question

我正在開發Vue-Tac-Toe應用程序，僅4個樂趣，而我現在只是被卡住了一點。

請先查看屏幕截圖以了解上下文。

---

問題：如何將cellRow傳遞給組件Field.vue ？

我想要的是：每個字段都應具有唯一的標識，例如，左上角（第一個）上的圖塊應將其識別為cellRow: 0 & cellId: 0因為我需要簡單地檢查cellRow: 0 & cellId: 0的信息， tac-toe win（3排等）

---

GameField.vue：我們有一個基於行和單元的布局。

<template>
  <div id="game-field">
    <div class="container">
      <template v-for="(rows, index) in 3">
        <Row :cell-row="index" />
      </template>
    </div>
  </div>
</template>

<script>
import Row from './Row.vue';

export default {
  components: {
    Row,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.container {
    width: 400px;
    margin: 10% auto 0;
}
</style>

Row.Vue：每行有3個字段。 從0-2。

<template lang="html">
  <div class="row">
    <Field
      v-for="(fieldId, index) in 3"
      :key="fieldId"
      :cell-id="index"
    />
  </div>
</template>

<script>
import Field from './Field.vue';

export default {
  components: {
    Field,
  },
  props: {
    cellRow: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {

    };
  },
};
</script>

<style lang="scss" scoped>
</style>

Field.vue：

<template lang="html">
  <div class="cell">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    cellId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
  .cell {
    margin: 1px 3px -3px -1px;
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block;
    cursor: pointer;
  }
</style>

Answer 1

如果我對問題的理解正確，則可以進一步將Row組件的cellRow作為Field組件的cellRow來傳遞。

行 （將cellRow作為道具傳遞給Field ）

<template lang="html">
  <div class="row">
    <Field
      v-for="(fieldId, index) in 3"
      :key="fieldId"
      :cell-id="index"
      :row-id="cellRow" // passing row index to Field component
    />
  </div>
</template>
...

領域

...
<script>
export default {
  props: {
    cellId: {
      type: Number,
      default: 0,
    },
    rowId: {  // defining new prop type
      type: Number,
      default: 0,
    },
  },
  ...
};
</script>

這是一個小演示：

 Vue.config.devtools = false; Vue.config.productionTip = false; Vue.component('Row', { template: ` <div class="row"> <Field v-for="(fieldId, index) in 3" :key="fieldId" :cell-id="index" :row-id="cellRow" /> </div> `, props: { cellRow: { type: Number, default: 0 } } }) Vue.component('Field', { template: ` <div class="cell"> <p>Row Id: {{ rowId }}</p> <p>Cell Id: {{ cellId }}</p> </div> `, props: { cellId: { type: Number, default: 0 }, rowId: { type: Number, default: 0 } } }) new Vue({ el: '#demo', template: ` <div id="game-field"> <div class="container"> <template v-for="(rows, index) in 3"> <Row :cell-row="index" /> </template> </div> </div> ` }) 

 .cell { margin: 1px 3px 3px 1px; width: 100px; height: 100px; background-color: gray; display: inline-block; cursor: pointer; color: white; padding: 5px; } .container { width: 400px; margin: 10% auto 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"></div>