vue组件this.$parent
一、在实例中
二、在组件中调用组件
vue子组件this.$parent调用父组件方法报错
TypeError:this.parent.xxx is not a function
或者将子组件移到 UI 组件外面也可以调用到
vue组件this.$parent在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件)
一、在实例中this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods:
//例子
this.$parent.list;//数据(模拟)
this.$parent.request();//方法(模拟)
二、在组件中调用组件
this.$parent 写在组件里面,外部组件调用此组件,则其指向这个组件:
举个例子：
比如elementPlus的组件 el-menu ,我们将其里面的一级二级菜单封装为一个组件,命名为 name:‘DemoMenu’,
//例子
<el-menu>
<DemoMenu :list='list'/>
</el-menu>
这种使用方式 this.$parent 就不是指向外部实例,而是指向 el-menu;
vue子组件this.$parent调用父组件方法报错 TypeError:this.parent.xxx is not a function在做 vue 项目开发时，遇到了在子组件中利用this.$parent调用父组件的自定义方法，报TypeError: this.$parent.xxx is not a function的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是文档也只有简短的说明，并没有相关的错误提示。
官方文档中没有提示，那就只能自己动手找原因了，随即就在子组件中打印了this.$parent ,通过控制台的打印，发现打印出来的 this.$parent并不是该组件的父组件，而是 Element ui 的组件，原来是我在父组件引用子组件的时候还在外面套了多层 UI 组件导致的。
<div class='app-container'>
<el-row :guter='20'>
<el-col>
......
<el-card>
......
<el-tabs v-model="activeName" @tab-click="handleClick">
<p slot="title">标题</p>
<my-component></my-component>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
打印this.parent会发现my−component的父组件为 parent会发现my-component的父组件为parent会发现my−component的父组件为 $el:div#pane-userinfo.el-tab-pane,需要一直$this.parent.parent.parent.parent.parent.parent找到 $el:div.app-contain 才可调用父组件方法。
或者将子组件移到 UI 组件外面也可以调用到<div class='app-container'>
<my-component></my-component>
</div>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
