如何用ref vue

Ref是Vue提供的一个操作DOM元素的方法，能够在组件或元素上引用一个特定的DOM节点，这在一些需要直接操作元素的场景下非常有用。它是通过在节点上使用 ref 特性来指定一个名称来使用的。

Ref的使用方式会因场景不同而不同。

在组件上使用，ref可以指向一个组件的实例，在组件内部可以使用this.$refs.[refName]来访问这个组件实例。

Vue.component('myComponent',{
  template: '<div>Hello World!</div>',mounted () {
    console.log(this.$el); // <div>Hello World!</div>
  }
});

Vue.component('myParent',{
  template: '<div><my-component ref="component"></my-component></div>',mounted () {
    console.log(this.$refs.component); // myComponent 实例
  }
});

上面的例子中，组件myParent通过ref属性为子组件myComponent指定了一个名称component，通过this.$refs.component就可以访问到myComponent组件的实例。

在普通元素上使用ref可以指向这个元素本身，或者是这个元素的子元素，这个时候通过this.$refs.[refName]可以直接访问到这个元素或子元素的实例。

<template>
  <div>
    <button ref="myButton" @click="clickHandler">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickHandler () {
      console.log(this.$refs.myButton); // button 元素
    }
  }
}
</script>

上面的例子中，ref指向的是一个button元素，通过this.$refs.myButton就可以直接访问到这个button元素的实例了。

Ref是一个很方便的方法，但是需要注意的是在使用ref的时候会有一些诸如异步渲染等的问题需要解决。

需要特别注意的是在父组件更新子组件时，子组件的$refs是不可用的，因为子组件还没有被渲染。如果子组件需要在mounted钩子中访问父组件传递给它的$refs，可以在nextTick中执行这个访问操作。

Ref还有一个局限性，它只能用于访问子元素或组件实例，如果需要访问父元素或祖先元素，需要使用特殊的方法来获取。

总之，Ref是Vue提供的一个非常方便的方法，在一些需要操作元素或组件实例的场景下使用它能够提高开发的效率。