vue使用this.$parent.变量名获取父组件的数据得到undefined

我们知道在子组件中可以通过

this.$parent.数据
this.$parent.方法 

主动获取父组件的数据和调用父组件的方法。

但是在工作中，我们经常会遇到使用 this.$parent.数据 获取父组件的数据 得到undefined的情况，如下：



这种问题往往是由于父组件在调用子组件的时候，在子组件的外层包裹了一层UI组件的某个组件

看下父组件调用子组件的代码：

 <template>
    <Modal
        v-model="applyStatus"
        title="扩容申请"
        width="1200"
        @on-ok="expansionSubmit">
        <ExpansionApply v-if="applyStatus" ref="childApply">ExpansionApply>
    Modal>
template>

可以看到在子组件ExpansionApply的外层还包裹了一个iview的Modal组件

这种情况下，我们就不能再通过简单的 this.$parent.数据 来获取父组件种的数据了
而是要通过以下方式获取：

this.$parent.$parent.数据

以此类推，外层包裹了几个组件就需要几个$parent