Vue3:ref references and dynamic components

1. ref references

1.1 What is a ref reference?

• ref is used to assist developers in getting references to DOM elements or components without relying on jQuery.
• Each component instance of vue contains a$refs object, which stores a reference to the corresponding DOM element or component. By default, a component's $refs points to an empty object.
• 

1.2 Referencing DOM elements with ref

• If you want to use a ref to reference a DOM element on a page, you can do it as follows:
  • 

1.3 Using ref referencessubassembliesan actual example

• If you want to use a ref to reference a component instance on a page, you can do so as follows:
  • 

1.4 Controlling on-demand switching of text boxes and buttons

• Control the on-demand switching of textboxes and buttons in the component with the boolean value inputVisible. The sample code is as follows:
  • 
  • 

1.4.1 Making text boxes get focus automatically

• When the text box is displayed, if you want it to get focus immediately, you can add a ref reference to it and call the native DOM object's .focus() method. The example code is as follows:
  • 
• The reason for this.$ undefined is that the dom element is updated asynchronously, and the element has not yet been updated.

1.4.2 this.$nextTick(cb) method

• The component's $nextTick(cb) method defers execution of the cb callback until after the next DOM update cycle. In plain English, this means that the cb callback function is executed after the component's DOM has been re-rendered asynchronously. This ensures that the cb callback function can manipulate the latest DOM elements.
  • 

2、Dynamic components

2.1 What is a dynamic component

• Dynamic components refer to dynamically switching between showing and hiding a component. vue provides a built-in component that is specifically designed to enable dynamic rendering of components.
  ① is a placeholder for the component
  ② Dynamically specify the name of the component to be rendered through the is attribute.
  ③

2.2 How to implement dynamic component rendering

• 

2.3 Using keep-alive to maintain state

• By default, the state of a dynamic component is not maintained when switching between them. In this case, you can use vue's built-in components to maintain the state of the dynamic component. The example code is as follows:
  • 

This post was also posted atlook north and south