Home >Web Front-end >Vue.js >The use and precautions of $refs in Vue

The use and precautions of $refs in Vue

王林
王林Original
2023-07-17 16:07:412315browse

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

  1. to get the reference of the DOM element

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.

  1. Get the reference of the subcomponent

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

  1. Update timing of $refs

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
  });
}
  1. Dynamic update of $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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn