vue中ref的用法

用法1.

vue給我們提供一個操作dom的屬性，ref。綁定在dom元素上時，用起來與id差不多，通過this.$refs來調用:

<div ref="test">test</div>
console.log(this.$refs.test)

 

 

看到打印出來就是綁定的dom對象，可以用來執行一些dom操作，比如操作樣式，獲取屬性等:

let testDom = this.$refs.test
testDom.style.height = '200px'
testDom.style.background = 'red'
console.log(testDom.clientHeight)

可以看到如果綁定在普通的dom元素上，與id用法基本一樣

用法2.

那肯定還有別的用法，比如 循環渲染:

 

 

可以看到是個數組，也很好理解，數組的每一項就是每個li元素。

用法3.

ref除了這兩個用法，還有另一種用法，綁定在組件標簽上:
比如說我現在有個組件test:

<template>
  <div style="height:200px;background:red;"></div>
</template>

<script>
export default {
  name:'test',
  data() {
    return{
      data:1
    }
  },
  methods: {
    _alert() {
      alert('test-ref')
    }
  }
}
</script>

然后我把別的地方引用它，並綁定ref:

<test ref="test"></test>
//打印出來看看這次是什么
console.log(this.$refs.test)

 

 

 

可以看到這次和我們之前綁定在dom元素上有很大的不同，這次獲取到的是一個VueComponent對象，里面有這個組件的各個屬性，這些屬性里面有一個$el，這就是dom對象，就是和我們直接綁定在dom元素上獲取的一樣:

let testDom = this.$refs.test.$el
console.log(testDom.clientHeight)  //打印出來就是設置的200

這個$el屬性，而且我們可以看到里面還有我們設置在data里面的變量，我們是可以直接通過這種ref的方式去修改，它就等於拿到那個組件的this，可以直接調用，不僅是data里面的變量，還有methods里面的方法:

//調用在之前組件里面定義的_alert()方法
this.$refs.test._alert()

 

 

這種用法特別適合在用ui框架的組件的時候，ui框架給我們提供了很多組件的方法，就是要通過這個ref去調用,比如說element-ui的樹形組件:

 

 還有許多，用到外部框架組件的時候，就需要使用這種方法。