Vue.js 如何将 prop 传递给父组件

Question

我正在开发一个只有 4 个乐趣的 Vue-Tac-Toe 应用程序，我现在有点卡住了。

请先看截图了解上下文。

问题： 如何将 cellRow 的 prop 传递给组件 Field.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：每行有 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

如果我理解正确的话，你可以将 cellRow prop of Row component 进一步简单地作为 Field component 的 prop 传递。

行（将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>

Vue.js 如何将 prop 传递给父组件

How to pass a prop to a parent component in Vue.js

javascript

tic-tac-toe

vue.js