在做 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的父组件为$ $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>