傑森前端

單個dom綁定ref

用ref定義一個變量給予null並且return到模板

模板中的dom上的屬性給予對應的ref='變量名稱'

這樣就會自動連結起來並且可以使用變量.value獲得dom

多個dom綁定ref

定義一個陣列變量

要導出一個func此func實作可以看範例

在模板中的dom上的屬性給與對應的 :ref='func名稱'

範例

<script>
import { ref, onMounted } from "vue";
export default {
  name: 'HelloWorld',
  setup(props, context) {
    let refs = []
    const setRefs = el => refs.push(el)
    let oneRef = ref(null)
    onMounted(() => {
      console.log(refs)
      console.log(oneRef.value)
    })
    return {
      setRefs,
      oneRef
    }
  }
}
</script>

<template>
  <div v-for="n in 3" :ref="setRefs">多個</div>
  <div ref="oneRef">單個</div>
</template>

<style scoped  lang="scss">
</style>