vue3 for 循环设置属性 ref 和获取的方式

子组件 nav 导航组件

  <template v-for="item in navOption" :key="item.id">
      <li class="nav-item">
        <slot name="content" :prop="item.id"/>
      </li>
    </template>

子组件 list 列表组件

  <template v-for="item in listOption" :key="item.id">
      <li class="list-item">
        {{item.nam}}
      </li>
    </template>

父组件调用

<div class="consumables-container">
    <Nav @navClick="handleClickNav">
      <template #content="content">

        <Lists :ref="(el)=>getDivRef(el,content.prop)"/>
      </template>

    </Nav>
</div>

const getDivRef = (e,id)=>{
    listRefs[`listRef${id}`]=e
   }
const handleClickNav = (item)=>{
    nextTick(()=>{
      listRefs[`listRef${item.id}`].setLoadList(item.id)
    })
    
  }