【问题总结（20）】如何用forEach遍历数组并格式化数组 arr.push 父子组件通信

如何用forEach遍历数组并格式化数组为antd a-select组件接受的数组

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
 async getCatList () {
      // 调用cat接口
      const catObj = await getAllCat()
      const catList = await catObj.result
      //置空this.catList
      this.catList = []
      // item 枚举的每个元素本身，index item的索引
      catList.forEach((item, index, catList) => {
      //原始数组数据 catList=[ { id:'1',name:'缅因'}...]
      if (item.id) {
        this.catList.push(
        //改造数组数据 this.catList=[{label:'缅因',value:'1'},...]
          { label:item.name, value:item.id }
        )
      }
      })
      // console.log(this.catList, '185')
      // console.log(catList, '186')
      return this.catList
    },

覆盖原始数组的某一个属性值

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
if (accountItem.group === 'cat') {
            // console.log(this.groupList, '006')
            const _indexGroup = this.groupList.findIndex(c => c.value === accountItem.group)

            // accountItem.group = this.groupList.label
            const _indexCat = catList.findIndex(c => c.value === accountItem.animal)

            if (_indexGroup > -1 && _indexCat > -1) {
              accountItem.group = this.groupList[_indexGroup].label
              accountItem.animal = catList[_indexCat].label
            }
          }

父子组件通信

下面展示一些 内联代码片。

父组件

// HTML
    <a-select :options="groupList" style="width: 120px" @change="handleGroupChange">
    </a-select>
    <a-select :options="classItem" style="width: 120px">
    </a-select>

// vue props 用法：父子组件通信 ：在父组件中的占位符 添加特性的方式 来传递数据 -->
  // 用v-bind动态绑定父组件的数据到子组件的模板props -->
    <PetModel
      :groupList="groupList"
      :classItem="classItem" //不需要，只需向子组件传递groupList够了，
      :options="options"
      :regionList="regionList"
      :isVisible="petModel.isVisible"
      :operatingState="petModel.operatingState"
      @
      @submit="handleOk"
      @cancel="handleCancel"
    />
// js
 handleGroupChange (val) {
      const currentItem = this.groupList.find((i) => {
        console.log(i, '004')
        console.log(i.value, '005')
        return i.value === val
      })
      this.classItem = currentItem.children

      console.log(this.classItem, '007')//当change事件即选择猫或狗时，打印即调用了handleGroupChange方法
    },

下面展示一些 内联代码片。

//子组件

// HTML
<a-form-model-item label="宠物类别" prop="groupList">
  <a-select :options="groupList" v-model="accountForm.groupList" @change="handleGroupChange">
  </a-select>
</a-form-model-item>
<a-form-model-item label="宠物品种" prop="classItem">
    <a-select :options="classItem" v-model="accountForm.classItem">
    </a-select>
</a-form-model-item>

// js
props:{
// default 写 `[]` 会报错`Type of the default value for 'groupList' prop must be a function.`
 groupList:{
        type:Array,
        default:() => {}
      },
      classItem:{//不再从父组件接收数据,从groupList里接收值也即数据也即child，这里注释
        type:Array,
        default:() => {}
      },
}

data () {
  accountForm: {
          name:'',
          regionList: undefined,
          options: undefined,
          groupList:[],
          classItem:[],//不要放在选项里了，因为groupList已经可以选到child了
          resource:''
          // desc:''
        },
        classItem:[],//
  
  rules:{
   groupList:[{ required:true, trigger:'change' }],
   classItem:[{ required: true, trigger:'change' }]
  }
}

methods() {
//省市区联动,级联 这里的change是自定义事件的名字 与宠物种类联动事件里的自定义重了，
//这里可以改change 并不是antd组件里是change,这里改了，对应的<PetModel />也要改
 onChange () {
        this.$emit('change')// this.$emit('changeRegion')
      },

//宠物联动
//这里只需要按父组件里的再写一遍即可，并且用classItem接收groupList里的child
  handleGroupChange () {
        // console.log('click group ')
        this.$emit('change')//触发父组件里的handleGroupChange（@change="handleGroupChange"）
        //导致父组件选择group时，与子组件独立的事件产生关系，
        //父组件选中了group和classItem即 猫和猫的child时，modal弹窗也选中
        //父子组件两者除了数据之外，不应有联系
       
      }
}

问题：宠物品种没有数据，也就是classItem没有传递给子组件

子组件回传，导致又触发了父组件上面的事件，正确的做法是，联动选项的话，
v-model 自身带有一个 input事件，一个@change事件
下面展示一些 内联代码片。

// 子组件

// HTML
<a-cascader
            v-model="accountForm.regionList"
            :field-names="{ label: 'name', value: 'code', children: 'children' }"
            :options="options"
            placeholder="请选择地址"
             @change="onChange" //不需要   
          />

异步同步的问题

不要return this.xxx
如果要引用局部变量，则
await xxx 等xxx完成后再执行

请教同事

1.父子组件通信
父组件里省市区联动用来搜索用户
子组件里省市区联动用来添加用户

1. 省市区级联 cascader 组件

//父子组件除了数据options需要通信外，change事件不需要 因为有v-model

// 子组件
<a-cascader
            v-model="accountForm.regionList"
            :field-names="{ label: 'name', value: 'code', children: 'children' }"
            :options="options"
            placeholder="请选择地址"
             @change="onChange" //不需要   父组件是不是也不需要
          />

v-model 语法糖：input:。

2

同步与异步

下面展示一些 内联代码片。

由于setData与getAllList都获取了一边数据，所以没有产生问题，实际应该是先执行getAllList(),await getAllList,然后在setData里面直接接收 用this.xxx

// 

// An highlighted block
 async setData () {
      this.groupList = []
      this.classItem = []
      const groupList = await this.getGroupList()
      console.log(groupList, '001')
      const catList = await this.getCatList()
      const dogList = await this.getDogList()
       groupList.forEach((element) => {
          if (element === 'cat') {
            this.groupList.push({
              label:'猫',
              value: element,
              children: catList
            })
          } else {
            this.groupList.push({
              label:'狗',
              value: element,
              children: dogList
            })
          }
        })
        return this.groupList
    },

// An highlighted block
async getAllList () {
      try {
       
        const catList = await this.getCatList()
        const dogList = await this.getDogList()
        // console.log(dogList, '001')
        const groupList = await this.getGroupList()
        // const groupList = this.getGroupList
        console.log(groupList, '0009')
        // console.log(this.groupList, '0008')

        // 将provinceList合到accountList
        for (const accountItem of this.accountList) {
         
          if (accountItem.group === 'cat') {
            // console.log(this.groupList, '006')
            const _indexGroup = this.groupList.findIndex(c => c.value === accountItem.group)

            // accountItem.group = this.groupList.label
            const _indexCat = catList.findIndex(c => c.value === accountItem.animal)

            if (_indexGroup > -1 && _indexCat > -1) {
              accountItem.group = this.groupList[_indexGroup].label
              accountItem.animal = catList[_indexCat].label
            }
          } 
        }