+-
vue 如何获取动态子组件 ClusterCommon 的 ref ?

如何获取子组件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(() => {
       })
      }
    }
}