Vue3 动态绑定 ref

414 阅读1分钟

绑定值

<DelayMeasuresForm
    v-for="(item, index) in checkedMeasures"
    :ref="el => setItemRef(el, item.id)"
    :key="item.id"
/>

定义一个 Map 用于存储 ref

const refs = new Map()

动态生成绑定的值

const setItemRef = (el, id) => {
    if (el) {
      state.refs.set(id, el)
    } else {
      state.refs.delete(id)
    }
}

使用绑定的 ref

const checkedIds = state.checkedMeasures.map(item => item.id)
const suerAllArr = checkedIds.map(id => {
  return state.refs.get(id).btnSureAddClick()
})
return Promise.all(suerAllArr).then(values => {
    // do something
})