# Vue 取得元素(DOM)

在vue.js裡從父元件要取得子元件的資訊
或是要操作DOM的話
例如：取得元素距離網頁頂部的高度

vue提供`$refs`方便我們去取得attr
透過使用`ref`讓元件定位

---

### ref定位

html結構上，先把要定位的元件加上`ref="..."`

  <button ref="item" @click.prevent="getHeight">
    按鈕
  </button>

### $refs取得
而在程式裡，要使用`$refs`去取得attr
:::warning
`$refs` **一定要加\$和s**
:::

    getHeight () {
      const items = this.$refs.item.offsetTop
      console.log(items) // 取得該元件距離頂部的高度
    }

*參考:https://blog.johnsonlu.org/vue-refs/*
*迴圈操作:https://israynotarray.com/vue/20220920/191396728/*