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

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
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue