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的树形组件:

 

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