vue中父组件获取子组件的值

vue项目中，普遍存在父组件和子组件相互传值的问题，
父组件向子组件传值用props，但是如果此时要修改父组件传的值呢，如何修改
这个时候就用到了ref来动态的进行传值

// 子组件
<template>
    <div v-for="(item, index) in pageInfo">
      <div v-if="!item.isEdit" @click="editAction(index)">
        <button>修改</button>
      </div>
      <div v-if="item.isEdit">
        <span>{{item.name}}</span>
      </div>

    </div>
</template>

<script>
export default {
  name: "index",
  data () {
    return {
      pageInfo: []
    }
  },
  methods: {
    getInfoAction (info) {
     this.page = info 
    },
    editAction (index) {
      this.pageInfo[index].isEdit = true
    }
  }
}
</script>

在子组件中进行了一个pageInfo内容的循环，而且在子组件内要进行修改，此时就不适合用props进行传值，可以利用ref来进行操作

<template>
  <div>
    <test ref="test"></test>
  </div>
</template>

methods: {
    getList () {
      this.$refs.test.getgetInfoAction(this.dataList)
    }
  }

根据上面可以看到是把信息传到子组件进行的一个for循环遍历，如果此时是在父组件记性的一个循环遍历子组件呢

// 子组件
<template>
  <div>
    <div v-if="!isEdit" @click="changeAction">
      <button>修改</button>
    </div>
    <div v-if="isEdit">{{info.name}}</div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
     info: {
        type: Object,
        default: () => {
            return {}
          }
   },
currentIndex: {
      type: Number,
      default: 0
  }
},
  data () {
    return {
      isEdit: false
    }
  },
  methods: {
    changeAction () {
      this.isEdit = !this.isEdit
      this.$emit('refresh', this.currentIndex)
    },
    resetData () {
        this.isEdit = false
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <test v-for="(item, index) in dataList"
          ref="'test' + index"
          :info="item"
          :currentIndex="index" @refresh="refresh"></test>
  </div>
</template>

<script>
export default {
  name: '',
  props: '',
  data () {
    return {
      dataList: []
    }
  },
  methods: {
    // 点击其中一个，其他的都不要显示内容
    refresh (index) {
      this.dataList.map((item, index) => {
        this.$refs['test' + index].resetData()
      })

    }
  }
}
</script>

此时页面大面积的报错，提示resetData方法不存在，但是我的方法明明是声明了的，然后打印this.$refs获取到的值，发现是一个VueComponent是一个数组，具体的内容都放在了数组里，所以调用不到具体的方法
修改后代码如下

<template>
  <div>
    <test v-for="(item, index) in dataList"
          ref="'test' + index"
          :info="item"
          :currentIndex="index" @refresh="refresh"></test>
  </div>
</template>

<script>
export default {
  name: '',
  props: '',
  data () {
    return {
      dataList: []
    }
  },
  methods: {
    // 点击其中一个，其他的都不要显示内容
    refresh (index) {
      this.dataList.map((item, index) => {
        this.$refs['test' + index][0].resetData()
      })

    }
  }
}
</script>

可以顺利的执行子组件的方法