子组件调用父组件里的方法(报错:Uncaught TypeError: this.$parent.getUserList is not a function)
参考文章链接: https://blog.csdn.net/bbs11007/article/details/125155738
为了有效减轻代码的臃肿程度,初学vue组件复用,把对用户信息增、改的两个操作用到的对话框做成对一个Dialog的复用,查了网上的方法,一开始是用
this.$emit() 来调用的,但是我的操作无效(可能有其他问题)于是使用 this.$parent.$parent.方法名 。如下图所示:
父组件:
子组件:
控制台报错内容:
最终解决:说明 this.$parent 里没有定义 getUserList() 这个方法,在参考了其他文章的解释后,子组件调用父组件的方法改成了下面这个:
这个和父组件里写的下面这句代码的位置有关。
<edit-and-modify ref="refName"></edit-and-modify>
如图所示:
修改后的代码是:
可以看到父组件里的方法调用成功。