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