Vue3 操作 DOM 元素技巧 refs

操作 DOM 元素技巧 refs

以往我們要取得 DOM 元素時，都透過 jQuery 或者撰寫原生 JS，然而 Vue3 可以使用 refs 來操作 DOM 元素

1. 先在 DOM 元素設定 ref 接著命名為自己要的名字

   <input type="text" ref="inputDom">

2. 接著可以在 mounted hook 直接取得，並做一些原生語法的撰寫

   mounted() {
       this.$refs.inputDom
   }

3. 若在元件內設定 ref，則可以取得此元件設定的所有 data，假設元件內的 data 如下

   data () {
       return {
           title: '標題',
           content: '內容'
       }
   }

4. 而 HTML 的元件如下

   <card ref="card"></card>

5. 這個時候可以透過 ref 來更改元件內的 data

   this.$refs.card.title = '更新過後的標題'