# 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;
    },