vue使用refs中子组件为空

vue使用refs中子组件为空

问题的由来

产品需求是在列表页上加一个按钮，点击后展示条目的详情。详情数据已经跟随列表数据同时返回，只是鉴于页面篇幅没有展示，所以，不需要重新请求后台，只需要展示。展示方法是弹窗。弹窗主体在父组件中，弹窗中的内容在子组件里。

开始的实现方案是这样的。

子组件提供一个方法，修改detail，如下：

父组件使用ref标记子组件，并通过子组件提供的方法，在每次弹窗打开前修改子组件的detail，如下：

问题

看起来没有毛病的处理方案，实际运行时，发现了一个问题，就是子组件中的内容偶尔展示不出来。经过调查，发现是在页面首次打开或刷新时，第一次打开弹窗，内容不展示。控制台提供refs中的detailCom为undefined。事实上，到了这一步，并不难猜，问题可能出现在子组件的实例化上。即当弹窗一次也没有展示的时候，子组件是未实例化的状态，这就导致，refs中的detailCom为空。

多看看官网的文档是个好习惯，我们在官网找到以下文字内容，印证了我们的猜测。

解决方案

解决方案是改为使用props来做。

子组件暴露一个props，供父组件传入detail，如下：

父组件组合子组件时，添加detail属性，并在打开弹窗时，设置其值，如下：

解决问题，效果如下：