vue 获取 v-for 循环中子组件的 ref
如题.
因要在循环出的子组件中插入echarts
图表,所以要拿到循环子组件的 $ref
.
请问,父子组件的 $ref
该如何写?
1.在父组件中循环子组件 HostListItem
<div class="list"><HostListItem
class="bgColorOdd"
ref="`hostItem${index}`"
v-for="(item,index) in hostItemObj"
:key="index"
:infoObj="item"
/>
</div>
2.子组件 HostListItem
中
<div class="hostlistitem"><span>{{infoObj.title}}</span>
<span class="hostlistcpu" ref="hostListCpu"></span>
<span class="hostlistmemery" ref="hostListMemery"></span>
<span>{{infoObj.status}}</span>
</div>
echarts
初始化举例.hostItem
是父组件$ref,hostitem
是子组件$ref.
echarts.init(this.$refs.hostItem.$refs.hostitem);
ref
当 v-for
用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
所以:
<HostListItemv-for="(item,index) in hostItemObj"
class="bgColorOdd"
ref="hostItem"
:key="index"
:infoObj="item"
/>
然后看你需要对哪个、还是全部进行初始化,例如第一个组件实例:
this.$refs.hostItem[0]
回答
以上是 vue 获取 v-for 循环中子组件的 ref 的全部内容, 来源链接: www.h5w3.com/113190.html