父子元件通訊——模擬12306購票新增乘車人

 

1.子元件   用來封裝每一條乘車人的元件

<template>
  <div>
    <div style="width:100% ">
      <table style="border-collapse:separate; border-spacing:10px 0px;">
        <tr>
          <td>學號</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <a-select
              showSearch
              style="width: 150px"
              @change="handleIdChange"
            >
              <a-select-option v-for="(v,k) in option" :key="k">
                {{ k }}
              </a-select-option>
            </a-select>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td>學科</td>
          <td>
            <a-select
              style="width:280px"
              showSearch
              @change="handleSbjChange">
              <a-select-option v-for="(v,k) in subjectList" :key="k">
                {{ k }}
              </a-select-option>
            </a-select>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td>考試成績</td>
          <td>
            <a-select
              mode="multiple"
              style="width: 250px"
              @change="getVersion">
              <a-select-option v-for="i in gradeList" :key="i">
                {{ i }}
              </a-select-option>
            </a-select>
          </td>
          <td>
            <a-button type="danger" @click="onDelete">
              刪除
            </a-button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>

export default {
  components: {
  },
  props: {
    option: {
      type: Object,
      default: () => ({}),
      required: false,
    },
  },
  data() {
    return {
      modelData: [],
      subjectList: {},
      gradeList: [],
      idPick: '',
      pickObj: { id: '', subject: '', grade: [] },
    }
  },
  computed: {

  },

  methods: {
    // 像父元件傳遞需要刪除的引數
    onDelete() {
      // $emit（even,value）even 是一個函式，value 是傳給父元件的值
      this.$emit('onDelete', this.pickObj)
    },

    handleIdChange(value) {
      this.idPick = value
      this.subjectList = this.option[value]
      this.pickObj.id = value
    },
    handleSbjChange(value) {
      this.gradeList = this.subjectList[value]
      this.pickObj.subject = value
    },
    getGrade(value) {
      this.pickObj.grade = value
    },
  },

}
</script>
  <style scoped>

  </style>

 

2.父元件

<template>
  <div style="background-color: white; padding: 16px;">
    <tr v-for="i in optionList" :key="i.key">
      <personBox
        :option="testData"
        @onDelete="deleteOneList(i)"
        style="margin-left:-12px"></personBox>
    </tr>

  </div>
</template>

<script>
import personBox from '@/元件在的路徑'
export default {
  name: 'SpecialCustomSearch',
  components: {
    personBox,
  },

  data() {
    return {
      optionList: [],
      testData: {
        小王: {
          數學: [99, 100, 200],
          語文: [99, 66, 99],
          英語: [99, 77, 88],
        },
        小hua: {
          數學: [99, 87, 200],
          語文: [99, 97, 99],
          英語: [99, 77, 88],
        },
        小勇: {
          數學: [45, 100, 200],
          語文: [77, 66, 99],
          英語: [88, 77, 88],
        },
      },
      pickList: {},
      optNum: 0,
    }
  },
  methods: {
    deleteOneList(i) {
      var final = this.optionList.filter(function(value, index, arr) {
        return (i.key !== value.key)
      })
      this.optionList = final
    },
    addModels() {
      const _this = this
      _this.optNum += 1
      var n = _this.optNum
      this.optionList.push({ key: n, ID: '', subject: '', grade: [] })
    },

  },
  created() {
    this.getModelData()
  },
}
</script>

<style>

</style>