Vue3 动态 refs

vue2的 this.refs[xxxx]写法在vue3中无法使用，因为获取组件实例修改成了 const xxxx = ref(null)

动态refs写法修改成:

// template:
<template v-for=item in list :key="item.id">
    <iframe :ref="(el)=>setItemRef(el, item.id)" :src="item.trueUrl" />
</template>

// js:
const iframeRefs = {}
const setItemRef = (el, key) => {
  if (el) {
    iframeRefs[key] = el
  }
}

// 获取实例
const iframeKey = xxx
const iframe = iframeRefs[iframeKey]
iframe.onload = () => {
  // ...  
}

 

官方文档链接： https://v3.cn.vuejs.org/guide/migration/array-refs.html#frontmatter-title