La référence peut-elle obtenir une instance de vue ? Plusieurs façons d'accéder aux instances

Dans Vue, les instances de composants sont créées à partir d'instances Vue. Dans un composant, nous pouvons utiliser ref pour obtenir une référence à un élément DOM ou à une instance de composant. Alors, puis-je utiliser ref pour obtenir une instance Vue ?

La réponse courte est non. Parce qu'une instance Vue n'est pas un élément ou un composant DOM, mais un objet JavaScript. Bien que l'instance Vue soit finalement rendue en tant qu'élément DOM sur la page, l'utilisation de ref dans le composant ne peut obtenir qu'une référence à l'élément DOM ou à l'instance du composant, et ne peut pas obtenir directement l'instance Vue.

Alors la question est : que dois-je faire si j'ai besoin d'accéder à l'instance Vue ? Voici plusieurs méthodes courantes :

1. Utilisez le mixage global Vue.mixin

Nous pouvons utiliser le mixage global Vue.mixin pour mélanger un objet dans tous les composants Vue. Dans l'objet mixin, nous pouvons définir une fonction de hook créée (ou une autre fonction de cycle de vie), puis l'instance Vue est accessible via celle-ci. L'exemple de code est le suivant :

// mixin.js 
export default { 
  created() { 
    console.log('Vue instance:', this.$root); 
  } 
} 
// main.js 
import Vue from 'vue'; 
import App from './App.vue'; 
import mixin from './mixin'; 

Vue.mixin(mixin); 

new Vue({ 
  render: h => h(App), 
}).$mount('#app');

définit une fonction hook créée dans mixin.js pour générer l'instance Vue lorsque le composant est créé. Dans main.js, nous appliquons le mixin globalement.

2. Utilisez $root pour accéder à l'instance Vue

Comme mentionné précédemment, l'instance Vue est accessible via this.$root. Dans le composant, nous pouvons également obtenir l'instance Vue via this.$root. Lorsque vous utilisez this.$root dans un composant pour accéder à une instance Vue, vous devez faire attention. Vous devez l'utiliser après la création de l'instance Vue, sinon undéfini sera renvoyé. L'exemple de code est le suivant :

<template> 
  <div> 
    <p>Using $root to access Vue instance:</p> 
    <button @click="logVueInstance">Log Vue Instance</button> 
  </div> 
</template> 

<script> 
  export default { 
    methods: { 
      logVueInstance() { 
        console.log('Vue instance:', this.$root); 
      } 
    } 
  } 
</script>

définit une méthode dans le composant pour générer une instance de Vue lorsque vous cliquez sur le bouton.

3. Utilisez $parent pour accéder à l'instance Vue

En plus d'utiliser $root, nous pouvons également accéder à l'instance Vue du composant parent via $parent. Si le composant parent est le composant racine, alors c'est l'intégralité. Instance Vue. Il est également important de noter que le composant parent doit avoir été créé avant d'utiliser l'accès $parent. L'exemple de code est le suivant :

<template> 
  <div> 
    <p>Using $parent to access Vue instance:</p> 
    <button @click="logVueInstance">Log Vue Instance</button> 
  </div> 
</template> 

<script> 
  export default { 
    methods: { 
      logVueInstance() { 
        console.log('Vue instance:', this.$parent.$root); 
      } 
    } 
  } 
</script>

définit une méthode dans le composant Lorsque vous cliquez sur le bouton, accédez à l'instance Vue du composant parent via $parent et affichez-la.

Pour résumer, bien que l'instance Vue ne soit pas accessible directement via ref, nous pouvons utiliser Vue.mixin, $root, $parent et d'autres méthodes pour accéder à l'instance Vue dans le composant.

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!