vue的动态绑定ref获取子组件的数据

vue的动态绑定ref获取子组件的数据

看了很多博客，尝试了很久，发现有很多问题，特此来记录一下。

父组件

          <el-form-item 
              style="font-weight: bold"
              v-for="questionID in questionNum"
              :label="'问题'+questionID"
          >
            <Question :ref="'question'+questionID"/>
          </el-form-item>

子组件的js

        data(){
            return{
                form: {
                    content: '',
                    type: "0",
                    option: []
                },
                optionNum:0
            }
        },

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

 for(let i = 0; i<num; i++){
                //动态绑定ref需要写成[`question${i+1}`]
                    console.log(this.$refs);
                    console.log(this.$refs[`question${i+1}`]);
                    console.log(this.$refs[`question${i+1}`].form);
                    console.log(this.$refs[`question${i+1}`][0].form);
                    }

结果

所以我们真正需要的是：

this.$refs[`question${i+1}`][0]

其中有子组件所存的数据：

data(){
	return{
		data1:data1
		data2:data2
	}
}