In Vue.js, is, key and ref are three commonly used built-in attributes. Their usage is as follows.
| Attribute | Core Function | Usage/Example |
| --- | --- | --- |
| `is` | Solve HTML tag syntax limitations, dynamically specify the component/native tag to render |
|
| `key` | Give Vue virtual DOM a unique identifier, improve list rendering efficiency, ensure correct component state |
{{item}}
|
| `ref` | Get DOM element or component instance, used to directly manipulate native DOM or call child component methods | Template: ref="name" Script: this.$refs.name this.$refs.inputRef.focus() |
## `is` Attribute
In Vue.js, the is attribute is typically used for implementing dynamic components, especially when you want to dynamically switch between different components at runtime.
* **Type**: String or Object
* **Purpose**: The `is` attribute is used to dynamically specify which child component the current `` component should render. It is typically used together with the `` element and dynamic component features, allowing you to switch between different components at runtime based on data.
## Example
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
export default {
data() {
return {
currentComponent: 'FirstComponent'
};
},
components: {
FirstComponent,
SecondComponent
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
}
}
};
In the above code, `currentComponent` is a data property that determines which specific component the `` element should render. When the button is clicked, calling the `toggleComponent` method will switch the value of `currentComponent`, thereby dynamically changing the rendered component.
**Notes:**
* **Notes**:
* The value of the `is` attribute can be a component name string or a component object.
* When using a string, the component name should match the registered component name.
* If using an object, you can directly reference the component object or use a computed property to return the component object.
* * *
## `key` Attribute
* **Type**: String or Number
* **Purpose**: In Vue.js list rendering, each element in a `v-for` loop needs to have a unique `key` attribute. The purpose of `key` is to help Vue identify the uniqueness of each node, thereby efficiently updating the virtual DOM. When Vue re-renders the list, it uses the `key` to determine whether to reuse existing DOM elements or recreate them.
## Example
{{ item.name }}
In the above code, `item.id` is used as the `key` attribute to ensure that each list item can be correctly identified and handled by Vue when data is updated.
* **Notes**:
* The `key` should be unique and stable. Stable means that the `key` should not change with data changes, otherwise it will affect Vue's performance and virtual DOM reuse strategy.
* Avoid using index as `key` unless you are sure the order of list items will not change.
* * *
## `ref` Attribute
* **Type**: String or Object
* **Purpose**: `ref` is used to register reference information for elements or child components. In actual development, you can use `ref` to access specific DOM elements or child component instances, so as to perform some operations such as calling methods, accessing properties, etc.
**Adding ref to DOM element**
## Example
export default {
mounted() {
console.log(this.$refs.inputField); // Access DOM element
this.$refs.inputField.focus(); // Call DOM element method
}
}
**Adding ref to child component**
## Example
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
mounted() {
console.log(this.$refs.childRef); // Access child component instance
this.$refs.childRef.doSomething(); // Call child component method
}
}
**Notes**:
* When using `ref` in templates, Vue will provide a corresponding `$refs` object, through which you can access the registered DOM elements or child component instances.
* Avoid abusing `ref`. Try to manipulate DOM and child components through data-driven and event handling as much as possible to maintain code maintainability and clarity.
YouTip