this.$refs的使用

在Vue.js中，使用`this.$refs`可以访问组件或者DOM元素。在组件中，可以给组件添加一个`ref`属性，然后使用`this.$refs`来访问这个组件的实例。例如：

<template>
  <div>
    <input type="text" ref="myInput" />
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.myInput.focus();
    }
  }
}
</script>

在上面的代码中，我们给`<input>`元素添加了一个`ref`属性，并且设置为`myInput`。然后在组件的`handleClick`方法中，使用`this.$refs.myInput`来访问这个`<input>`元素，并且调用了它的`focus()`方法，使得这个元素被聚焦。这样用户在点击按钮时，输入框就会自动聚焦。

另外，在Vue.js中，也可以使用`this.$refs`来访问子组件的实例。例如：

<template>
  <div>
    <my-component ref="myComponent"></my-component>
    <button @click="handleClick">Click me</button>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  methods: {
    handleClick() {
      this.$refs.myComponent.doSomething();
    }
  }
}
</script>

在上面的代码中，我们引入了一个名为`MyComponent`的组件，并且在父组件中使用`<my-component>`标签来将它渲染出来。然后我们给这个组件添加了一个`ref`属性，设置为`myComponent`。在父组件的`handleClick`方法中，使用`this.$refs.myComponent`来访问这个子组件的实例，并且调用了它的`doSomething()`方法。这样就可以在父组件中控制子组件的行为了。