Vue2中的ref属性（Vue中的id）的介绍以及使用案例

什么是ref属性？

在Vue中，ref属性用于在组件中引用DOM元素或子组件。通过ref属性，我们可以在组件中访问和操作DOM元素或子组件的属性和方法。ref属性可以被认为是一种在Vue组件中获取元素引用的方式。

如何使用ref属性？

在Vue2中，使用ref属性需要以下几个步骤：

1. 在模板中声明ref属性

在模板中，可以使用ref指令声明一个ref属性，并指定一个唯一的名称。

<template>
  <div>
    <h1 ref="title">Hello, Vue!</h1>
  </div>
</template>

我们在<h1>元素上声明了一个ref属性，名称为"title"。

2. 在组件中访问ref属性

在组件的JavaScript代码中，可以通过this.$refs对象访问ref属性。

例如：我们在组件的mounted钩子函数中通过this.$refs.title访问了ref属性。

export default {
  mounted() {
    console.log(this.$refs.title);
  }
};

3. 使用ref属性引用子组件

除了引用DOM元素，ref属性还可以用于引用子组件，使得我们可以在父组件中使用ref属性引用了一个子组件。

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

4. 在组件中访问子组件的属性和方法

通过ref属性引用子组件后，我们可以在父组件中访问子组件的属性和方法。

例如：我们可以在父组件的mounted钩子函数中通过this.$refs.child访问了子组件，并调用了子组件的someMethod方法。

export default {
  mounted() {
    console.log(this.$refs.child);
    console.log(this.$refs.child.someMethod());
  }
};

示例：使用ref属性引用DOM元素和子组件

一个简单的示例，演示了如何在Vue2中使用ref属性引用DOM元素和子组件：

<template>
  <div>
    <h1 ref="title">Hello, Vue!</h1>
    <child-component ref="child"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$refs.title);
    console.log(this.$refs.child);
    console.log(this.$refs.child.someMethod());
  }
};
</script>