vue子组件this.$parent调用父组件方法报错TypeError:this.parent.xxx is not a function

在做 vue 项目开发时，遇到了在子组件中利用this.parent调用父组件的自定义方法，报‘TypeError:this.parent调用父组件的自定义方法，报`TypeError: this.parent调用父组件的自定义方法，报‘TypeError:this.parent.xxx is not a function`的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是

yanhyan

12673人浏览 · 2021-03-23 14:21:07

yanhyan · 2021-03-23 14:21:07 发布

在做 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. $p a r e n t 会发现 m y - c o m p o n e n t 的父组件为$ $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>

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}$/, //不连续的两位字母// /^