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

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.

2. 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
  });
}

2. 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!