this.$refs用法

`this.$refs` 是 Vue.js 框架提供的一个属性，用于访问组件中的子组件或 DOM 元素。在组件中使用 `ref` 属性给子组件或 DOM 元素命名，然后可以通过 `this.$refs` 来访问它们。

例如，在一个组件中，我们可以这样定义一个子组件：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    someMethod() {
      // 访问子组件
      this.$refs.child.someMethod()
    }
  }
}
</script>

在上面的代码中，我们给子组件命名为 `child`，然后在 `methods` 中使用 `this.$refs.child` 来访问该子组件，并调用其方法 `someMethod()`。

除了访问子组件，`this.$refs` 还可以访问 DOM 元素。例如：

<template>
  <div>
    <input type="text" ref="input">
  </div>
</template>

<script>
export default {
  methods: {
    someMethod() {
      // 访问输入框的值
      console.log(this.$refs.input.value)
    }
  }
}
</script>

在上面的代码中，我们给输入框命名为 `input`，然后在 `methods` 中使用 `this.$refs.input` 来访问该输入框，并获取其值。