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

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

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

但是在工作中,我们经常会遇到使用 this.$parent.数据 获取父组件的数据 得到undefined的情况,如下:
父组件ExpansionManager.vue
子组件ExpansionApply.vue
在这里插入图片描述
这种问题往往是由于父组件在调用子组件的时候,在子组件的外层包裹了一层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

Logo

前往低代码交流专区

更多推荐