this.$refs.用法详细举例

this.$refs 是 Vue 的实例属性，用于访问组件或元素的引用。下面是一些使用 this.$refs 的例子：

1. 获取组件实例

在组件中添加 ref 属性，可以获取组件实例，然后就可以调用组件实例上的方法或获取组件实例上的数据。示例代码如下：

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

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

export default {
  components: {
    ChildComponent
  },
  mounted () {
    const childInstance = this.$refs.child
    childInstance.doSomething()
  }
}
</script>

2. 获取元素

在 HTML 元素中添加 ref 属性，可以获取该元素的引用，然后就可以操作该元素。示例代码如下：

<template>
  <div>
    <input ref="input" type="text">
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick () {
      const inputValue = this.$refs.input.value
      console.log(inputValue)
    }
  }
}
</script>

3. 获取子组件中的元素

在子组件中添加 ref 属性，可以获取子组件中的元素，然后就可以操作该元素。示例代码如下：

<!-- ParentComponent.vue -->
<template>
  <child-component ref="child"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted () {
    const childInput = this.$refs.child.$refs.input
    childInput.focus()
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input ref="input" type="text">
  </div>
</template>

在父组件中获取子组件的引用，然后再通过 `$refs` 获取子组件中的元素。