vue父组件给v-for循环的子组件传值

普通的父子组件传值：

父页面中子组件写法：

                <Form
                  :addFrom="addFrom"
                  @changeChild="changeChild"
                ></Form>

子组件中通过Prop去接收参数

  @Prop()
  addFrom;

子组件中如果需要给父组件传值则在子组件中通过方法this.$emit('方法名',数据)给父组件传递数据

  changeChildData(data) {
      if (!!this.item.columnNameRelated) {
      let info = {
        'columnName': this.item.columnName,
        'columnNameRelated': this.item.columnNameRelated,
        'parentId': data
      }
      this.$emit('changeChild', data);
    }
  }

for循环的父子组件传值： 

当子组件是通过v-for循环出来的，并且只给特定的某个组件传值时通过this.$refs调用子组件的方法传递数据

<div class="form-col" v-if="getIsShow(item)" :key="'c' + i">
              <el-form-item
                :label="item.columnName"
                :prop="item.columnName"
                :title="item.columnName"
              >
                <Form
                  :ref="'A' + item.columnName"
                  :addFrom="addFrom"
                  :item="item"
                  @changeChild="changeChild"
                ></Form>
              </<el-form-item>
</div>

父组件中写法为：

  private changeChild(data) {
    //当该字段存在关联字段时 给关联字段传值
    if (!!data.columnNameRelated) {
      let info = 'A' + data.columnNameRelated;
      this.$refs[info][0].initParentId(data.parentId);
    }
  }

子组件中接收数据：

  //获取传递的父节点数据
  initParentId(data) {
    console.log(data)
    this.parentId = data
  }

一般传值this.$res[xxx]都不用带下标，但是如果是for循环出来的一定要指定下标this.$refs[xxx][0]。

因为我这里是ref唯一的所以每个传值的下标都是0，如果定义的子组件ref不唯一都是类似ref="ABC"这种，给指定的子组件传数据就要通过他们的索引值传值this.$refs[xxx][0]、this.$refs[xxx][1]、this.$refs[xxx][2]...

                <Form
                  ref="ABC"
                  :addFrom="addFrom"
                  :item="item"
                  @changeChild="changeChild"
                ></Form>

如果不加下标的话会报错：