Home > Article > Web Front-end > The use and precautions of $refs in Vue
The use and precautions of $refs in Vue
In Vue, $refs is a special attribute used to access references to components or elements. Through $refs, we can easily obtain instances of DOM elements or subcomponents and operate and interact with them. This article will introduce the use of $refs and give some things to pay attention to.
1. Use $refs
In the template, if you add the ref attribute to the DOM element, you can pass $refs to get a reference to the DOM element. For example:
<template> <div> <input ref="inputElement" type="text" /> <button @click="focusInput">获取焦点</button> </div> </template> <script> export default { methods: { focusInput() { this.$refs.inputElement.focus(); } } }; </script>
In the above example, the ref attribute is added to the input element and named "inputElement". You can get the reference to the DOM element through this.$refs.inputElement, and then call its focus method to get the focus.
Similarly, we can also get the reference of the subcomponent through $refs, and call methods in the subcomponent or access its properties . For example:
<template> <div> <child-component ref="childComponent"></child-component> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildMethod() { this.$refs.childComponent.childMethod(); } } }; </script>
In the above example, we introduced a subcomponent named ChildComponent and used it in the template. By adding a ref attribute to the child component and naming it "childComponent", we can get the reference to the child component through this.$refs.childComponent and call its childMethod method.
2. Notes
It should be noted that $refs is obtained after the Vue instance is rendered. of. This means that $refs cannot be obtained correctly in the life cycle hook function created of the Vue instance. If you need to use $refs in created, you can delay execution through the nextTick function.
created() { this.$nextTick(() => { // 在这里可以正确获取到$refs }); }
$refs will only be set and updated during the rendering of the component instance, so use v-if or v in the template -For dynamically generated DOM elements cannot be obtained through $refs. If you need to dynamically update $refs, you can use the key attribute.
<template> <div> <child-component v-if="showChild" :key="uniqueKey" ref="childComponent"></child-component> <button @click="toggleChild">切换子组件</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { showChild: true, uniqueKey: 0 }; }, methods: { toggleChild() { this.showChild = !this.showChild; this.uniqueKey += 1; }, callChildMethod() { this.$refs.childComponent.childMethod(); } } }; </script>
In the above example, by adding the key attribute to the subcomponent and binding it to the uniqueKey variable, the dynamic update of $refs can be triggered when switching subcomponents.
3. Summary
$refs is a very practical feature in Vue. It can easily obtain references to DOM elements or subcomponents, and operate and interact with them. When using $refs, you need to pay attention to its update timing and dynamic update method. I hope the introduction in this article can help you better use and understand the $refs feature in Vue.
The above is the detailed content of The use and precautions of $refs in Vue. For more information, please follow other related articles on the PHP Chinese website!