Comment résoudre l'erreur Vue : impossible d'utiliser correctement ref pour accéder à l'instance du composant parent dans le composant enfant
Dans le développement de Vue, la communication entre les composants parent et enfant est une opération très courante. L'une des méthodes courantes consiste à utiliser ref pour accéder à l'instance du composant parent dans le composant enfant. Cependant, vous rencontrerez parfois une erreur : ref ne peut pas être utilisé correctement pour accéder à l'instance du composant parent dans le composant enfant. Cet article présentera la cause de cette erreur et fournira des solutions et des exemples de code.
Analyse du problème :
Lorsque nous utilisons ref dans un composant enfant pour faire référence à une instance de composant parent, l'erreur "Impossible de lire la propriété '$parent' de non défini" apparaît parfois. La raison de cette erreur est que lors du processus de création du composant enfant, l'instance du composant parent n'a pas été complètement créée, ce qui empêche le composant enfant d'accéder correctement à l'instance du composant parent.
Solution :
Pour résoudre ce problème, nous devons accéder à l'instance du composant parent au moment approprié. Vue fournit une fonction de hook de cycle de vie pour gérer cette situation, à savoir « monté ». Nous pouvons accéder à l'instance du composant parent dans la fonction de hook montée du composant enfant pour nous assurer que le composant parent a été entièrement créé.
L'exemple de code est le suivant :
// Composant parent
<h2>父组件</h2>
<ChildComponent ref="childRef"></ChildComponent>
<script><br>import ChildComponent from ' ./ChildComponent .vue'</p><p>export default {<br> nom : 'ParentComponent',<br> composants : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>ChildComponent</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> Mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log('父组件实例已创建')</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>
// Composant enfant
< template>
<h2>子组件</h2>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
