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)
    })
    
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容