vue项目中子组件调用父组件函数报错“TypeError: “this.$parent.b(p)“ is not a function

2023-05-16

参考:解决 vue项目中子组件调用父组件函数报错"TypeError: "this.$parent.b(p)“ is not a function,哭死我了_不错@的博客-CSDN博客

木有解决我的问题,然后在参考this.$parent is not a function 子组件调用父组件方法_liulang1905的博客-CSDN博客_子组件调用父组件方法报错

这才给我灵感。

事情是这样的:

大概父组件 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定义之类的错误、这些事常识,先确定好自己写的逻辑有没有错误,网上很多父子组件相互调用的方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue项目中子组件调用父组件函数报错“TypeError: “this.$parent.b(p)“ is not a function 的相关文章

随机推荐