Vue中ref 如何使用

Vue中ref是一个指令，可以用来在Vue组件实例中引用其它元素或子组件。它可以被用来简化一些常见的操作，比如获取DOM元素或子组件实例，以及在元素或子组件上调用实例方法。

使用ref指令可以让我们在组件实例上添加一个属性，这个属性指向一个DOM元素或子组件实例，这样我们就可以在组件实例中访问到该元素或子组件实例。

ref指令的语法非常简单，只需要在元素上添加ref属性，并将其值设为一个字符串，最后在Vue实例中通过$refs属性访问该元素或子组件实例。

例如，我们可以在一个div元素上添加ref属性，并将其值设为“myDiv”，然后在Vue实例中通过$refs.myDiv访问该div元素。

<div ref="myDiv">...</div>

// 在Vue实例中
const div = this.$refs.myDiv
// 此时div就是该div元素的引用

ref指令也可以用在子组件上，这样我们就可以在父组件中访问子组件实例。例如，我们可以在一个子组件上添加ref属性，并将其值设为“myChild”，然后在父组件中通过$refs.myChild访问该子组件实例。

// 子组件
<template>
  <div>...</div>
</template>

<script>
export default {
  name: 'MyChild',
  ref: 'myChild'
}
</script>

// 父组件
<template>
  <div>
    <MyChild ref="myChild" />
  </div>
</template>

<script>
import MyChild from './MyChild.vue'

export default {
  components: {
    MyChild
  },
  mounted () {
    // 此时this.$refs.myChild就是MyChild组件实例的引用
    const child = this.$refs.myChild
  }
}
</script>

ref指令也可以用在组件的根元素上，这样我们就可以在父组件中访问组件实例。例如，我们可以在一个组件的根元素上添加ref属性，并将其值设为“myComponent”，然后在父组件中通过$refs.myComponent访问该组件实例。

// 子组件
<template>
  <div ref="myComponent">...</div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

// 父组件
<template>
  <div>
    <MyComponent ref="myComponent" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  mounted () {
    // 此时this.$refs.myComponent就是MyComponent组件实例的引用
    const component = this.$refs.myComponent
  }
}
</script>

总之，ref指令可以用来简化一些常见的操作，比如获取DOM元素或子组件实例，以及在元素或子组件上调用实例方法。