+-
如何获取子组件ClusterCommon
的 ref cc
?
1.App组件结构(含动态组件):
<grid-layout>
<grid-item v-for="item in layout" :key="item.i" ref="testGridItem">
<test-element>
<component :is="item.j" :infoObj="clusterObj" :infoObjCommon="clusterTitleObj" ></component>
</test-element>
</grid-item>
</grid-layout>
2.动态传进去其中一个组件,即"item.j"
的内容:
<div class="cn-right-summary">
<div class="cn-title">
<label>总览</label>
</div>
<div class="cn-content-cluster">
<ClusterState />
<ClusterCommon ref="clusterCpu" :infoObj="infoObjCommon"/>
<ClusterCommon ref="ClusterMemory" :infoObj="infoObjCommon"/>
<ClusterCommon ref="clusterStorage" :infoObj="infoObjCommon"/>
</div>
</div>
3.子组件ClusterCommon结构:
<div class="clustercpuWrapper">
<div class="clustercpu" ref="cc" ></div>
<div class="clustertitle">{{infoObj.title}}</div>
</div>
// ... App父
<component ref="item"
:is="item.j" >
</component>
//.父
export default{
methods: {
aaa() {
// 1. 一层层点就是很麻烦
this.$refs.item.$refs.clusterCpu.$refs.cc
// 2. 找到item组件 使用他的children, 在children中找
this.$refs.item.children.forEach(() => {
})
}
}
}