mounted中使用this.$refs报unfidned
```
<cube-slide-item v-for="(tab, index) in tabs" :key="index">
<component :is="tab.component" :data="tab.data" ref="component"></component>
</cube-slide-item>
```
使用了v-for遍历，生成动态组件
挂载完毕初始化默认选中值。
尴尬的事情出现了。。。
动态组件引用失败~
<font color="#ff0000"></font>这段代码在其他项目是正常的。
看了看代码，发现这个使用一些“优化”写法。
例如组件懒加载
```
export default {
name: 'Home',
computed: {
tabs() {
return<span class="hljs-meta"> [
{
label: '推荐',
component: () => import('components/recommend/recommend'),
data: { }
},
{
label: '歌手',
component: () => import('components/singer/singer'),
data: { }
},
{
label: '排行',
component: () => import('components/rand/rand'),
data: { }
},
{
label: '搜索',
component: () => import('components/search/search'),
data: { }
}
]</span>
}
},
```
严重怀疑是不是它的锅。。。
代码换成标准引用方式
```
import Recommend from 'components/recommend/recommend'
import Rand from 'components/rand/rand'
import Singer from 'components/singer/singer'
import Search from 'components/search/search'
export default {
name: 'Home',
computed: {
tabs() {
return<span class="hljs-meta"> [
{
label: '推荐',
// component: () => import('components/recommend/recommend'),
component: Recommend,
data: { }
},
{
label: '歌手',
// component: () => import('components/singer/singer'),
component: Singer,
data: { }
},
{
label: '排行',
// component: () => import('components/rand/rand'),
component: Rand,
data: { }
},
{
label: '搜索',
// component: () => import('components/search/search'),
component: Search,
data: { }
}
]</span>
}
},
```
代码顺利运行~~
估计是懒加载加载时机导致的。
评论区