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

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

image.png

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

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

可以看到如果綁定在普通的dom元素上，與id用法基本一樣，那肯定還有別的用法，比如 循環(huán)渲染:

//簡單的數(shù)組:
    list:[1,2,3,4]
//綁定在循環(huán)渲染上
    <ul>
      <li v-for="(item,index) in list" :key="index" ref="list">
        {{index}}--{{item}}
      </li>
    </ul>
//打印看一下這個ref="list"是什么
    console.log(this.$refs.list)

image.png

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

• ref除了這兩個用法，還有另一種用法，綁定在組件標(biāo)簽上:
  比如說我現(xiàn)在有個組件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)

image.png

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

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

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

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

image.png

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

image.png

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