VUE 子组件中 THIS.$PARENT 无法调用父组件的自定义方法，TypeError: this.$parent.xxx is not a function的问题

最新推荐文章于 2023-11-21 09:56:59 发布
最新推荐文章于 2023-11-21 09:56:59 发布
阅读量4.4k 收藏 4
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42819470/article/details/117061658
版权
在Vue开发中，遇到子组件尝试通过`this.$parent`调用父组件的自定义方法时出现错误：TypeError: this.$parent.xxx is not a function。问题根源在于父组件引用子组件时，由于中间嵌套了UI组件，导致`this.$parent`实际上指向了UI组件而非父组件。解决方案是检查父组件对子组件的引用，确保没有形成UI组件的闭环或闭环位置正确。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为是小白，所以这个问题废了我九牛二虎之力，话不多说。

简单描述：遇到了在子组件中利用this. p a r e n t 调 用 父 组 件 的 自 定 义 方 法 ， 报 T y p e E r r o r

最低0.47元/天 解锁文章
Vue 官方笔记--组件
小菜的博客
07-24 3050
中文版(英文浓缩) 组件是什么？ 组件：具有预定义选项的实例 组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用 通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下 <!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 --> <div id="main"> <ol> <!-- 子组件 --> <todo-item v-for=
Error in nextTick “TypeError Cannot read property ‘xxx‘ of undefined“
a10534126的博客
02-26 891
报这个错主要是因为子组件还没加载完成就对子组件进行赋值，推荐使用第一个 this.$nextTick( ()=> { //修改子组件的内容 }); //或 setTimeout(() => { //修改子组件的内容 }, 50); 父组件传值给子组件，子组件不能直接修改，会报错 //子组件修改父组件的值 this.$emit('名字','值'); //子组件调用父组件的方法 this.$emit('方法', va
vue子组件this.$parent调用父组件方法报错TypeError:this.parent.xxx is not a function
weixin_40151813的博客
03-23 1万+
在做 vue 项目开发时，遇到了在子组件中利用this.parent调用父组件的自定义方法，报‘TypeError:this.parent调用父组件的自定义方法，报`TypeError: this.parent调用父组件的自定义方法，报‘TypeError:this.parent.xxx is not a function`的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是文档也只有简短的说明，并没有相关的错误提示。 官方文档中没有提示，那就只能自己动手找原因了，随即就在子组件中打印
vue项目中子组件调用父组件函数报错“TypeError: “this.$parent.b(p)“ is not a function
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
06-06 2403
子类调用父类的方法，老是报错，"TypeError: "this.$parent.b(p)“ is not a function
关于vue-this.$parent is not a function
weixin_45843676的博客
05-20 1741
关于vue-this.$parent is not a function
关于iview在Vue项目中报错：Error in mounted hook: "TypeError: this.$parent.updateNav is not a function"
c_longer的博客
05-21 7836
目前并没有发现该报错对项目功能有什么影响，但报错总归是让人心中不爽，所以解决记录一下。 主要原因是项目中使用tabs组件不规范导致，如<TabPane></TabPane>标签外层没有<Tabs></Tabs>包裹。 ...
使用elementui+vue 遇到this.$parent.xxxxx is not function
Q010_的博客
07-21 1889
问题复现 这个是父组件 这个是子组件 报错说是方法不是一个function 输出this.$parent一下确实不是父组件 解决继续.$parent 成功
vuex 解决报错this.$store.commit is not a function的方法
12-08
Vue.js 是一款流行的前端框架，用于构建用户界面。...如果仍然遇到 `this.$store.commit is not a function` 错误，检查一下是否正确引入和初始化了 Vuex，以及在组件中是否正确地调用了 `commit` 方法。
Vue+iview报TypeError: this.$parent.updateGutter is not a function
爬虫 的博客
06-27 6337
今天对之前写的代码拆分了下component，然后就遇到 TypeError: this.$parent.updateGutter is not a function 仔细调了下，发现这里面循环多少个就出现多少次错误，然后想到parent，就找到问题了，外层少了row。应该是col元素必须在row元素内
关于子组件调用时ESLint报错的TypeError: n.indexOf is not a function问题定位及解决
weixin_43996368的博客
05-24 1839
关于子组件调用时ESLint报错的TypeError: n.indexOf is not a function问题定位及解决 个人遇到的情况是这样的 ！！！ 1.在这个情况下，只引入了IsNormal单个组件时，整体的代码并没有报错，项目运行也没有问题 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e1dd4e4a0ea9451a8cdeec4617edc72c.png 2.在此基础上引入第二个组件NodeDetailList时，ESlint产生报错 3.从报错内容去看
遇到value.indexOf is not a function问题的原因以及解决方法
KMINLIKE的博客
12-13 6973
前端遇到的问题解决
uniapp子组件使用this.$parent调用父组件方法报错TypeError:this.parent.xxx is not a function
最新发布
qq_50880219的博客
11-21 886
逐一增加$parent进行调试。
“TypeError: this.$parent.clearList is not a function“
m0_58893670的博客
11-11 586
子组件调用父组件方法报错： this.$parent.clearList is not a function。是因为我使用了UI组件把我的子组件包裹起来了，获取到的父组件就是UI组件，才导致报错
Uncaught TypeError: XXX is not a function的解决方法
m0_54066656的博客
03-13 2万+
Uncaught TypeError: XXX is not a function的解决方法
Vue.js学习笔记
weixin_43571751的博客
04-05 984
Vue.js学习笔记安装与部署创建第一个Vue应用数据Vue提供的方法生命周期模板语法文本方式输出原始HTML属性Attribute使用 JavaScript 表达式指令指令参数动态参数（2.6.0新增）对动态参数的值的约束指令缩写如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚...
this.$parent is not a function 子组件调用父组件方法
liulang1905的博客
05-20 1万+
子组件调用父组件方法时报的错 感谢这位大佬提供的解决方法，原文地址 地址 问题原因：this.$paren 这就话应该是获取父组件，因为我使用了element-ui 将我的子组件包了起来，获取到的父组件就是element-ui了，所以在调用父组件的方法是肯定是没有了 我这里的子组件是 navigation-left <el-aside :width="navLeftWidth + 'px'" class="scroll"
js出现错误：parent.$ is not a function
xiaoxiao48的博客
06-04 1万+
今天在layui上面想进入页面自动隐藏左侧按钮，需要在子页面给父页面添加一个class样式才能实现。 在子页面操作父页面要加上 parent.在前面才能生效，如： //隐藏左侧导航栏 parent.$(".layui-layout-admin").toggleClass("showMenu"); 这样子是可以实现自动关闭左侧菜单，但是实际上报错了，提示：Uncaught TypeError: parent.$ is not a function 看这个的意思是没有jQuery的$方法，去父页面那里看了一下
Vue 报错TypeError: this.$set is not a function 的解决方法
热门推荐
心有猛狗
05-12 8万+
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataTyp...
微信小程序报错TypeError: this.XXXX is not a function---------小程序坑之no2
笑*容的博客
06-03 6万+
https://blog.csdn.net/tianlebest/article/details/76359348
在 Vue 子组件中使用 this.$parent 访问父组件的方法
05-04
在 Vue 子组件中，可以使用 `this.$parent` 访问父组件实例。通过访问父组件实例，我们可以调用父组件的方法或者访问父组件的数据。 例如，假设我们有一个父组件 `Parent` 和一个子组件 `Child`，父组件中有一个方法 `parentMethod`，我们想在子组件中调用这个方法。 在父组件中： ```vue <template> <div> <Child /> </div> </template> <script> import Child from './Child.vue' export default { components: { Child }, methods: { parentMethod() { console.log('父组件方法被调用') } } } </script> ``` 在子组件中： ```vue <template> <div> <button @click="callParentMethod">调用父组件方法</button> </div> </template> <script> export default { methods: { callParentMethod() { this.$parent.parentMethod() } } } </script> ``` 在子组件中，我们定义了一个 `callParentMethod` 方法，当点击按钮时会调用这个方法。在这个方法中，我们使用 `this.$parent` 访问父组件实例，然后调用父组件的 `parentMethod` 方法。 需要注意的是，使用 `this.$parent` 访问父组件实例是一种比较简单的方式，但是它也有一些限制。如果你需要在多个子组件中访问同一个父组件的方法或数据，建议使用 `props` 或 `provide/inject` 等更加可靠的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值