vue中ref的用法

vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:

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

image.png

看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:

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

可以看到如果绑定在普通的dom元素上，与id用法基本一样，那肯定还有别的用法，比如 循环渲染:

//简单的数组:
    list:[1,2,3,4]
//绑定在循环渲染上
    <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

可以看到是个数组，也很好理解，数组的每一项就是每个li元素。

• 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)

image.png

可以看到这次和我们之前绑定在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()

image.png

这种用法特别适合在用ui框架的组件的时候，ui框架给我们提供了很多组件的方法，就是要通过这个ref去调用,比如说element-ui的树形组件:

image.png

还有许多，用到外部框架组件的时候，就需要使用这种方法。