在使用this.$refs[formName]的时候拿不到子组件传过来的对象

Question

这是我子组件出发父组件的事件
<el-button type="primary" v-on:click="sendMsg">确 定</el-button>

this.$emit('headCallBack', {

            imageUrl:this.imageUrl,// 图片的值
            desc:this.ruleForm.desc,// 播放时间的值
            status:this.canshu.status,// 类型的值
            laiyuan:this.laiyuan,// 二维码来源
            locfirst:this.canshu.locfirst,//坐标x
            locsecond:this.canshu.locsecond,//坐标y
            sizewidth:this.canshu.sizewidth,//尺寸长
            sizeheigt:this.canshu.sizeheigt//尺寸宽
        }); //第一个参数是父组件中v-on绑定的自定义回调方法，第二个参数为传递的参数

父组件监听子组件的变化拿到值

                <ad-first v-show="cities.indexOf(1)> -1" v-bind:data="configType" v-bind:qrSourceLsit="qrSourceLsit" v-on:headCallBack="submitForm"></ad-first>
                

第一个红色的框可以输出一个对象
第二个就不可以输出 这个对象是子组件传给父组件的
为啥我使用
this.$refs[formName].validate((valid) => {
我就拿不到子组件的对象呢 好郁闷啊

Answer 1

没看到你在哪里设置ref哦
ref设置在普通dom和组件上是不一样的：

<div ref="refDiv"></div>
<el-button ref="refButton"></div>

this.refs.refDiv访问到div元素，this.refs.refButton访问到的是组件对象。

Answer 2

可以看下iview里from表单的提示/验证。
1：需要在from写ref="name"
2: 提示时验证的this.$refs['name'](注意，这里的name可以直接写from绑定的ref值，也就是name)

Answer 3

函数多次嵌套后里面的this指向应该被改变了，
改成这样应该就可以了

submitForm(formName) {
  const name = formName;
  this.$refs[name].validate((valid) => {
    console.log(name);
    ...
  })
}