Javascript 如何在Vue.js中将道具传递给父组件

我正在开发一个Vue Tac-Toe应用程序，只是有点好玩，我现在有点卡住了

请先看截图以了解上下文。

---

问题：如何将

cellRow

的道具传递给组件

字段.vue

我想要什么：每个字段都应该有一个唯一的标识，例如左上角的磁贴（第一个），它应该被识别为

cellRow:0&cellId:0

因为我需要有一些信息来简单地检查一下抽搐抽搐的胜利（一行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”导入行；
导出默认值{
组成部分：{
一行
},
数据（）{
返回{}；
},
};
.集装箱{
宽度：400px；
利润率：10%自动0；
}

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”导入字段；
导出默认值{
组成部分：{
领域
},
道具：{
cellRow：{
类型：数字，
默认值：0，
},
},
数据（）{
返回{
};
},
};

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>

导出默认值{
道具：{
细胞：{
类型：数字，
默认值：0，
},
},
数据（）{
返回{}；
},
};
.细胞{
保证金：1px 3px-3px-1px；
宽度：100px；
高度：100px；
背景色：白色；
显示：内联块；
光标：指针；
}

如果我正确理解了问题，您可以将

cellRow

prop of

Row

组件进一步传递为

字段的prop

组件

行（将

单元格行

作为道具传递到

字段

）

您不是这样设置道具新的吗？我需要row的值位于Field.vue组件内。它需要关联。通过这种方式，在

字段

实例上创建新的prop，但传递的是行索引的相同值。关系得以保持。我已经更新了答案，添加了一个小演示，我希望它有帮助。

<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>