vue3 如何通過 ref 獲取 DOM 節(jié)點(diǎn)

在 vue2 中,我們通過 ref 為節(jié)點(diǎn)添加一個(gè)名稱,然后用 this.$refs['節(jié)點(diǎn)名稱'] 就可以獲取到DOM節(jié)點(diǎn),

例:

<template>
  <div ref='one'>我是節(jié)點(diǎn)</div>   // 添加名稱
</template>

<script>
  mounted() {
    console.log(this.$refs.one) // 獲取到 one DOM 節(jié)點(diǎn)
  }
</script>

在 vue3 中,我們一樣可以通過為節(jié)點(diǎn)添加一個(gè) ref 名稱 ,但是接下來的步驟和 vue2 有些區(qū)別

1.為節(jié)點(diǎn)添加一個(gè) ref 名稱
2.創(chuàng)建 ref 響應(yīng)式常量并且與 DOM 節(jié)點(diǎn)名稱一致 ,且值為 null
3.在 mounted 之后通過 常量的 value 即可獲取到 DOM 節(jié)點(diǎn)

例:

<template>
    <div ref="two">我是節(jié)點(diǎn)</div>
</template>

<script>
  setup() {
      const two= ref(null)
        onMounted(() => {  // 需要在DOM加載完畢之后才可獲取到
          console.log(two.value)
        })
      return { two }
 },
</script>

OK,今天就寫這么多~!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容