子组件引用报错: TypeError: this.$refs.xxx is not a function

背景介绍: 记录一个不常见的报错原因(附带解决方法),Vue2+element ui

先看关系图:

问题描述:在列表中,首先打开的是组件A, 通过组件A,打开组件B, 当处在组件B页面中的时候,再次点击,想返回A组件的时候,报了标题的错误; 此时是能够获取到目标DOM的, 但是却不能引用目标DOM的方法,

解决方案:查阅了element ui dialog组件的相关描述: 给dialog 添加 destroy-on-close="true",关闭时销毁 Dialog 中的元素, 再测试的时候就没有报错了;

原因分析:可能是在第二次想要打开A组件的时候, 此时A组件没有销毁, 再次打开的时候,相当于再次创建A组件,导致方法丢失; 以上原因只是大致推测,是否正确还需要进一步考证.