vue使用refs中子组件为空
问题的由来
产品需求是在列表页上加一个按钮,点击后展示条目的详情。详情数据已经跟随列表数据同时返回,只是鉴于页面篇幅没有展示,所以,不需要重新请求后台,只需要展示。展示方法是弹窗。弹窗主体在父组件中,弹窗中的内容在子组件里。
开始的实现方案是这样的。
子组件提供一个方法,修改detail,如下:
父组件使用ref标记子组件,并通过子组件提供的方法,在每次弹窗打开前修改子组件的detail,如下:
问题
看起来没有毛病的处理方案,实际运行时,发现了一个问题,就是子组件中的内容偶尔展示不出来。经过调查,发现是在页面首次打开或刷新时,第一次打开弹窗,内容不展示。控制台提供refs中的detailCom为undefined。事实上,到了这一步,并不难猜,问题可能出现在子组件的实例化上。即当弹窗一次也没有展示的时候,子组件是未实例化的状态,这就导致,refs中的detailCom为空。
多看看官网的文档是个好习惯,我们在官网找到以下文字内容,印证了我们的猜测。
解决方案
解决方案是改为使用props来做。
子组件暴露一个props,供父组件传入detail,如下:
父组件组合子组件时,添加detail属性,并在打开弹窗时,设置其值,如下:
解决问题,效果如下:
领取专属 10元无门槛券
私享最新 技术干货