H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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>
  1. echarts初始化举例.
    hostItem是父组件$ref,hostitem是子组件$ref.
echarts.init(this.$refs.hostItem.$refs.hostitem);

回答:

ref

v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

所以:

<HostListItem
    v-for="(item,index) in hostItemObj"
    class="bgColorOdd"
    ref="hostItem"
    :key="index"
    :infoObj="item"
/>

然后看你需要对哪个、还是全部进行初始化,例如第一个组件实例:

this.$refs.hostItem[0]

本文地址:H5W3 » vue 获取 v-for 循环中子组件的 ref

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址