---
# System prepended metadata

title: 9/29 vue $refs 作用

---

# 9/29 vue $refs 作用

html
```
<div id="app">
  <div class="box" ref="box"></div>
  <button @click="getData">get</button>
</div>
```
css
```
.box{
  width: 50%;
  height: 200px;
  background: green;
}
```
vue
```
let app=new Vue({
  el: "#app",
  data: {},
  methods: {
    getData: function(){
      let width=this.$refs.box.clientWidth;
      let height=this.$refs.box.clientHeight;
      console.log(width+", "+height)
    }
  }
})
```
[CodePen](https://codepen.io/uxfiqtum-the-scripter/pen/WNEZgaj?editors=0111)
或是用來控制scroll 
將scrol置底
```
scrollToBottom() {
      this.$refs.messageBox.scrollTop = this.$refs.messageBox.scrollHeight;
    },
```

