参考:解决 vue项目中子组件调用父组件函数报错"TypeError: "this.$parent.b(p)“ is not a function,哭死我了_不错@的博客-优快云博客
木有解决我的问题,然后在参考this.$parent is not a function 子组件调用父组件方法_liulang1905的博客-优快云博客_子组件调用父组件方法报错
这才给我灵感。
事情是这样的:
大概父组件 fu.vue
<--你看那些模板都是<child>的,其实木有关系-->
<el-dialog ref="dialog" @opened="dialogOpened()" >
<se-compare ref="compareDialog" >
</se-compare>
</el-dialog>
<script>
dialogOpened(e) {
console.log("打开dailog窗口");
this.$refs.compareDialog.getSummary();//调用子类的方法
}
gettest(){
console.log("父组件的方法");
}
</script>
大概子组件zi.vue
<el-button type="primary" icon="el-icon-eleme" plain @click="FileDiff()">按钮</el-button>
<script>
props:["父类绑定的值之类的"]
FileDiff(){
console.log("调用父类的方法");
this.$parent.gettest();
},
</script>
然后运行时报:
this.$parent.gettest is not a function
没搞懂,研究半天,发现它的子类嵌套了一个父类
这正是给我解决灵感的地方,就是它的父类的父类才是他gettest()所以:
this.$parent.$parent.gettest();
解决这种:
1.首先要区分子类还是父类,哪个是子类,哪个父类
2.含有props的就是子类
3.看报错嵌套 ,上边是子类,下边是它的父类,层级一步步的很明显
4.当然是最常识的错误就是,父类根本木有此方法、拼写错误、ref定义之类的错误、这些事常识,先确定好自己写的逻辑有没有错误,网上很多父子组件相互调用的方法。