Introduction and use of $ref attribute

Insert image description here

In Vue.js, $refit is a special property used to access DOM elements or subcomponent instances in Vue components. It allows you to directly access DOM elements or subcomponents inside a component and manipulate or modify them if needed. The following is $refa detailed introduction and example demonstration to give you a simple introduction and conceptual distinction.

Access DOM elements using the $ref attribute

Add attributes to the template ref:

First, in your Vue component template, you can refidentify the DOM element by adding attributes on it. For example:
```
<template>
  <div>
    <button ref="myButton">点击我</button>
  </div>
</template>
```

Access DOM elements:

You can then this.$refsaccess refthe DOM element identified as via the object. In the JavaScript part of the Vue component, you can do this:

export default {
      
      
  mounted() {
      
      
    // 访问DOM元素
    const buttonElement = this.$refs.myButton;
    
    // 对DOM元素进行操作
    buttonElement.style.backgroundColor = 'blue';
  }
}

Use the $ref attribute to access child component instances

In addition to accessing DOM elements, $refit can also be used to access instances of subcomponents. This is useful for communicating with child components within a parent component.

refAdd properties in parent component :

In a parent component's template, you can use refproperties to reference instances of child components. For example:
```
<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>
```

Access subcomponent instances:

You can then this.$refsaccess the child component instance through the object. In the JavaScript section of the parent component, you can do this:

import ChildComponent from './ChildComponent.vue';

export default {
      
      
  components: {
      
      
    ChildComponent
  },
  mounted() {
      
      
    // 访问子组件实例
    const childInstance = this.$refs.childRef;
    
    // 调用子组件的方法
    childInstance.doSomething();
  }
}

These examples demonstrate how to use 在Vue.js中， $re f' is a special attribute used to access DOM elements or subcomponent instances in Vue components . It allows you to directly access the DOM elements or subcomponents inside the component and manipulate or modify them when needed. The following is a detailed introduction and example demonstration about'$ ref`.

Access DOM elements using the $ref attribute

Add attributes to the template ref:

First, in your Vue component template, you can refidentify the DOM element by adding attributes on it. For example:
```
<template>
  <div>
    <button ref="myButton">点击我</button>
  </div>
</template>
```

Access DOM elements:

You can then this.$refsaccess refthe DOM element identified as via the object. In the JavaScript part of the Vue component, you can do this:

export default {
      
      
  mounted() {
      
      
    // 访问DOM元素
    const buttonElement = this.$refs.myButton;
    
    // 对DOM元素进行操作
    buttonElement.style.backgroundColor = 'blue';
  }
}

Use the $ref attribute to access child component instances

In addition to accessing DOM elements, $refit can also be used to access instances of subcomponents. This is useful for communicating with child components within a parent component.

refAdd properties in parent component :

In a parent component's template, you can use refproperties to reference instances of child components. For example:
```
<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>
```

Access subcomponent instances:

You can then this.$refsaccess the child component instance through the object. In the JavaScript section of the parent component, you can do this:

import ChildComponent from './ChildComponent.vue';

export default {
      
      
  components: {
      
      
    ChildComponent
  },
  mounted() {
      
      
    // 访问子组件实例
    const childInstance = this.$refs.childRef;
    
    // 调用子组件的方法
    childInstance.doSomething();
  }
}

These examples demonstrate how to use $refproperties to access DOM elements and subcomponent instances, and how to interact with them. Please note that $refits use should be done with caution, and try to avoid overusing it in large applications, as it can cause the code to become difficult to maintain. In most cases, it is recommended to use Vue.js's data binding and event delivery mechanism for communication and operations between components.

Above we just introduced simple usage. Next we will upgrade the difficulty a little and make a high-dimensional integration:
$refproperties are mainly used to access DOM elements and sub-component instances in Vue.js, but they can also be used for some complex usage situations. For example:

Form Validation : You can use $refto access form elements for client-side validation before submitting the form. For example:

<template>
  <div>
    <form ref="myForm" @submit="submitForm">
      <input type="text" ref="inputField" required>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

export default {
      
      
  methods: {
      
      
    submitForm() {
      
      
      // 访问表单和输入字段
      const form = this.$refs.myForm;
      const input = this.$refs.inputField;
      
      if (form.checkValidity()) {
      
      
        // 表单验证通过，执行提交操作
        // ...
      } else {
      
      
        // 表单验证失败，处理错误
        // ...
      }
    }
  }
}

Dynamic rendering components : You can use them $refto dynamically render and control sub-components. For example, rendering different child components based on certain conditions:

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <component :is="currentComponent" ref="dynamicComponent"></component>
  </div>
</template>

export default {
      
      
  data() {
      
      
    return {
      
      
      currentComponent: 'ChildComponentA'
    };
  },
  methods: {
      
      
    toggleComponent() {
      
      
      // 根据条件切换子组件
      this.currentComponent = (this.currentComponent === 'ChildComponentA') ? 'ChildComponentB' : 'ChildComponentA';
      
      // 访问动态渲染的子组件实例
      const dynamicComponent = this.$refs.dynamicComponent;
      // 可以调用子组件的方法或访问其属性
      dynamicComponent.doSomething();
    }
  }
}

Operating third-party libraries : If you need to integrate with a third-party JavaScript library, you can use it $refto access DOM elements or instantiate objects in the library. For example, integrate with a chart library or a map library:

<template>
  <div>
    <div ref="chartContainer"></div>
  </div>
</template>

export default {
      
      
  mounted() {
      
      
    // 初始化图表库，并将其绘制到DOM元素中
    const chart = new Chart(this.$refs.chartContainer, {
      
       /* 配置选项 */ });
    chart.draw();
  }
}

The above is our explanation of the properties vuein $ref.

Before writing this article, I already vuehad a certain understanding and use of these key attributes. However, I did not have a deep understanding of these key attributes. As a result, I sometimes encountered similar problems. It seems that it is not advisable to avoid the important and ignore the practical. I hope everyone can take every step and let's move forward together! ! !