Detailed explanation of how to obtain component instances using the refs attribute in the Vue document

Vue.js, as a front-end framework, has become more and more widely used in the field of front-end development in recent years. In Vue's official documentation, we can see many useful development guides and tips. Among them, the refs attribute is one of the methods to obtain component instances. Today we will learn about this attribute in detail.

Basic concept of refs attribute

refs is a property of Vue.js, used to get the DOM node or subcomponent instance in the component. It can help us access the DOM elements, methods and properties of the child component in the parent component, thereby interacting directly with the child component. Through the refs attribute, we can directly access the data and methods inside the child component without passing the data and methods through props and events.

Usage of refs attribute

The basic usage of refs attribute is as follows:

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <input ref="inputBox" type="text"/>
    <ChildComponent ref="childComponent"/>
  </div>
</template>

In the above template, we can add ref attribute to DOM node, or to sub-component Add ref attributes to get their instances. At this point, we can use this.$refs in the parent component or Vue instance to access their instances.

export default {
  mounted() {
    // 访问inputBox实例
    this.$refs.inputBox.focus();

    // 访问childComponent实例
    this.$refs.childComponent.doSomething();
  }
}

In the mounted hook, we can access subcomponent instances through this.$refs to obtain their methods and properties. For example, in the above code, we can access the instance of the input box through this.$refs.inputBox and call its focus() method; similarly, we can access the instance of the child component through this.$refs.childComponent and call it Call its doSomething() method.

In addition, the refs attribute can also create an array through [ref v-for] and bind each ref to each element in the array.

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <div v-for="i in 5" :key="i" :ref="'item'+i">{{ i }}</div>
  </div>
</template>

In the above template, we use the v-for instruction to traverse the array, and each element will generate a number. We can then use this number in the ref attribute to create an array and bind them to each element individually.

export default {
  mounted() {
    // 访问Ref数组中的元素
    console.log(this.$refs.item1.innerHTML); // 1
    console.log(this.$refs.item2.innerHTML); // 2
    console.log(this.$refs.item3.innerHTML); // 3
    console.log(this.$refs.item4.innerHTML); // 4
    console.log(this.$refs.item5.innerHTML); // 5
  }
}

Through the above code, we can access the innerHTML attribute of each element, that is, output 1, 2, 3, 4, 5.

Summary

The refs attribute is an important method to obtain component instances in Vue.js. It allows us to more conveniently access DOM nodes, methods and properties in sub-components. Whether you are developing a simple web page or a complex web application, you can use the refs attribute to simplify your code and improve development efficiency.

It is worth noting that the refs attribute should only be used when you need to directly access child components or elements. If you want to establish communication between two components, using props and events is more appropriate.

The above is the detailed content of Detailed explanation of how to obtain component instances using the refs attribute in the Vue document. For more information, please follow other related articles on the PHP Chinese website!