ref在vue2中的使用

在Vue 2中，ref 是一个用于在组件中创建对 DOM 元素或组件实例的引用的特殊属性。它可以在模板或组件内的 JavaScript 代码中使用。下面是 ref 的使用方式：

1. 在模板中使用 ref：

<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

在上面的例子中，我们创建了一个带有 ref 属性的 input 元素，并将其命名为 "myInput"。这样我们就可以在组件内部通过 this.$refs.myInput 来访问该元素。

2. 在组件内部使用 ref：

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

在上面的例子中，我们在组件的方法中使用 this.$refs.myInput 来访问 input 元素，并调用其 focus() 方法，从而使输入框获得焦点。

需要注意的是，ref 只能用于访问组件的根元素或者 DOM 元素，而不能用于访问子组件的实例。如果想要访问子组件的实例，可以使用 ref 结合 $children 或者通过父子组件之间的事件来进行通信。