L'utilisation et les précautions de $refs dans Vue

Utilisation et précautions de $refs dans Vue

Dans Vue, $refs est un attribut spécial utilisé pour accéder aux références à des composants ou des éléments. Grâce à $refs, nous pouvons facilement obtenir des instances d'éléments ou de sous-composants DOM et les exploiter et interagir avec eux. Cet article explique comment utiliser $refs et donne quelques éléments auxquels il faut prêter attention.

1. Utilisez $refs

1. pour obtenir la référence de l'élément DOM

Dans le modèle, si vous ajoutez l'attribut ref à l'élément DOM, vous pouvez obtenir la référence de l'élément DOM via $refs. Par exemple :

<template>
  <div>
    <input ref="inputElement" type="text" />
    <button @click="focusInput">获取焦点</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputElement.focus();
    }
  }
};
</script>

Dans l'exemple ci-dessus, l'attribut ref est ajouté à l'élément d'entrée et nommé "inputElement". La référence à l'élément DOM peut être obtenue via this.$refs.inputElement, puis sa méthode focus est appelée pour obtenir le focus.

2. Obtenir la référence du sous-composant

De même, nous pouvons également obtenir la référence du sous-composant via $refs et appeler des méthodes dans le sous-composant ou accéder à ses propriétés. Par exemple :

<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>

Dans l'exemple ci-dessus, nous avons introduit un composant enfant appelé ChildComponent et l'avons utilisé dans le modèle. En ajoutant un attribut ref au composant enfant et en le nommant "childComponent", nous pouvons obtenir la référence au composant enfant via this.$refs.childComponent et appeler sa méthode childMethod.

2. Notes

1. Calendrier de mise à jour de $refs

Il convient de noter que $refs est obtenu après le rendu de l'instance Vue. Cela signifie que $refs ne peut pas être obtenu correctement dans la fonction hook de cycle de vie créée à partir de l'instance Vue. Si vous devez utiliser $refs dans la création, vous pouvez retarder l'exécution via la fonction nextTick.

created() {
  this.$nextTick(() => {
    // 在这里可以正确获取到$refs
  });
}

2. La mise à jour dynamique de $refs

$refs ne sera définie et mise à jour que pendant le processus de rendu de l'instance de composant. Par conséquent, les éléments DOM générés dynamiquement à l'aide de v-if ou v-for dans le modèle ne peuvent pas être transmis. $ Obtenu à partir des réf. Si vous devez mettre à jour dynamiquement $refs, vous pouvez utiliser l'attribut key.

<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>

Dans l'exemple ci-dessus, en ajoutant l'attribut key au sous-composant et en le liant à la variable uniqueKey, la mise à jour dynamique de $refs peut être déclenchée lors du changement de sous-composant.

3. Résumé

$refs est une fonctionnalité très pratique de Vue, qui peut facilement obtenir des références à des éléments ou sous-composants du DOM, et les utiliser et interagir avec eux. Lorsque vous utilisez $refs, vous devez faire attention à son timing de mise à jour et à sa méthode de mise à jour dynamique. J'espère que l'introduction de cet article pourra vous aider à mieux utiliser et comprendre la fonctionnalité $refs dans Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!