使用 Template Reference 取得 DOM Element | 點燈坊

實務上 Vue 應該盡量使用 Model-based 寫法，專心處理 Data，HTML 則由 Vue 處理，但若想透過 DOM Element 處理，此時可使用 Template Reference。

Version

Vue 3.2

Template Reference

按下 Draw Text 會動態產生 Hello World。

<template>
  <button @click="onClick">Draw Text</button>
  <div ref="canvas"/>
</template>

<script setup>
let canvas = $ref (null)

let onClick = _ => canvas.textContent = 'Hello World'
</script>

第 3 行

<div ref="canvas"/>

使用 ref 取代 id。

第 7 行

let canvas = $ref (null)

使用 $ref 建立 Reactive Variable 且初始值為 null。

第 9 行

let onClick = _ => canvas.textContent = 'Hello World'

以 textContent 直接設定顯示內容。

Conclusion

• Vue 3 不必再使用 this.$refs 取得 DOM element，而是直接以 ref 名稱取得，唯必須先以 $ref 建立 Reactive Variable 且初始值為 null

Reference

Vue, Template Refs