Vue－取得 DOM 元素（$ref）

似曾相似。

有時候你可能會想直接操作 DOM 元素，這時候能這樣做：

<template>
  <div class="wrap">
    <!--  加上 ref 屬性  -->
    <input type="text" ref="inputElem" />
    <button @click="handleClick" />
  </div>
</template>

<script>
  import Button from './components/Button.vue'

  export default {
    name: 'App',
    components: {
      Button
    },
    methods: {
      handleClick() {
        // <input type="text"> 節點
        console.log(this.$refs.inputElem)
      }
    }
  }
</script>

加上 ref 屬性的元素可以透過 this.$ref.名稱 來存取。

上面我們把 input 加上 ref="inputElem"，所以在 handler 中就可以用 this.$ref 來取得。

雖然這東西在 Composition API 裡有另一個用途，不過到時候再說吧。