Lorsque le composant est chargé, Provide et Inject de Vue ne sont pas définis.
<p><br /></p><h2>Situation</h2>
<p>J'essaie d'utiliser l'API d'options de Vue pour fournir et injecter des fonctionnalités afin que le composant <code>header.vue</code> ; composant (Voir hiérarchie des composants). Cependant, lorsque les données sont injectées, elles ne sont pas définies lors du chargement initial. </p>
<p><strong>Hiérarchie actuelle des composants : </strong></p>
<ul>
<li>header.vue > header-nav-menu.vue >
</ul>
<h1>Tentative 1 - header.vue (grand-parent)</h1>
<p>Dans ce composant, j'obtiens la chaîne suivante <code>'/'</code> à l'intérieur de <code>Provide() {}</code> </p>
<pre class="brush:php;toolbar:false;">import { definitionComponent } depuis 'vue'
importer le parentStore depuis '@/store'
exporter le composant défini par défaut ({
installation() {
// Ne devrait pas avoir accès à this.navHome -> non défini (charge avant l'API des options)
console.log("1. Appel de la configuration dans l'en-tête")
const storeCommon = parentStore()
retourner { storeCommon }
},
avantCréer() {
// Ne devrait pas avoir accès à this.navHome -> non défini (charge avant l'API des options)
console.log("2. Appel avantCreate dans l'en-tête")
},
fournir() {
console.log("3. Appel de provide dans l'en-tête")
retour {
navHome : this.storeCommon.textualData[0]?.navigation.links.home
}
},
créé() {
// Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
console.log("9. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
},
monté() {
// Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
console.log("8. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
}
})</pré>
<h1>Essayez 1 - conteneur-nav.vue (enfant)</h1>
<p>Dans ce composant, j'injecte le <code>navHome</code> fourni par le composant <code>header.vue</code></p>
<pre class="brush:php;toolbar:false;">import { definitionComponent } depuis 'vue'
exporter le composant défini par défaut ({
injecter : [ 'navHome' ],
installation() {
// Ne devrait pas avoir accès à this.navHome -> non défini (se charge avant l'API des options)
console.log("4. Appel de la configuration dans Container Nav")
},
avantCréer() {
// Ne devrait pas avoir accès à this.navHome -> non défini (se charge avant l'API des options)
console.log("5. Appel avantCreate dans Container Nav")
},
créé() {
// Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
console.log("6. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
},
monté() {
// Doit avoir accès à this.navHome -> '/' (charge après l'API des options)
console.log("7. Appel de beforeCreate dans Container Nav : ", this.$refs.navHome)
}
})</pré>
<h1>尝试 1 - 测试</h1>
<p>使用 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. Appel de la configuration dans l'en-tête
2. Appel de beforeCreate dans l'en-tête : non défini -> Correct
3. Appel de Provide dans l'en-tête
4. Appel de la configuration dans Container Nav
5. Appel de beforeCreate dans Container Nav : non défini -> Correct
6. Appel créé dans Container Nav : non défini -> Incorrect (devrait être '/')
7. Appel monté dans Container Nav : non défini -> Incorrect (devrait être '/')
8. Appel monté dans l'en-tête : non défini -> Incorrect (devrait être '/')
9. Appel créé dans l'en-tête : non défini -> Incorrect (devrait être '/')</pre>
<heure />
<h1>尝试 2 - header.vue（祖父母）</h1>
<p>使用与之前相同的代码和选项 API, andlt;code>setup</code> Et <code>provide</code>。</p>
<pre class="brush:php;toolbar:false;">import { definitionComponent, provide } depuis 'vue'
importer le parentStore depuis '@/store'
installation() {
// 1. Essayé de cette façon
const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
const navHome = fournir('navHome', navLinkHome)
// 2. Essayé de cette façon
const navHome = provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
retour {
// 1 & 2
navAccueil
// Et aussi de cette façon
navHome : provide('navHome', parentStore().getTextualData[0]?.navigation.links.home)
}
}</pré>
<h1>尝试 2 - conteneur-nav.vue（子级）</h1>
<pre class="brush:php;toolbar:false;">import { definitionComponent, inject } depuis 'vue'
installation() {
const navHome = injecter('navHome')
retour {
navAccueil
// J'ai essayé ça aussi, mais comme ci-dessus, juste plus longtemps
navHome : navHome
}
}</pré>
<h1>尝试 2 - 测试</h1>
<p>使用 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. Appel de la configuration dans l'en-tête
2. Appel de beforeCreate dans l'en-tête : non défini -> Correct
3. Appel de la configuration dans Container Nav
4. Appel de beforeCreate dans Container Nav : non défini -> Correct
5. Appel créé dans Container Nav : non défini -> Incorrect (devrait être '/')
6. Appel monté dans Container Nav : non défini -> Incorrect (devrait être '/')
7. Appel monté dans l'en-tête : non défini -> Incorrect (devrait être '/')
8. Appel créé dans l'en-tête : non défini -> Incorrect (devrait être '/')</pre>
<h2>混乱</h2>
<ul>
<li><p>首先，我注意到在 <code>header.vue</code> C'est <code>provide() {}</code> Options API 时，并尝试引用 <code>navHome</code>。我无法在创建或安装的方法中使用 <code>this.navHome</code> 。我会收到一条错误消息，说它在 <code>CreateComponentPublicInstance</code> 类型上不存在。为了解决这个问题，我改为使用 <code>this.$refs.navHome</code> - 甚至不确定这是否是正确的做法。</p>
≪/li>
<li><p>其次，当在 <code>container-nav.vue</code> 组件中使用 <code>inject : [ 'navHome' ]</code> 时，我无法使用 <code>this.navHome</code> 访问它。Encore une fois, je ne peux y accéder qu'en utilisant <code>this.$refs.navHome</code>. </p>
≪/li>
</ul>
<p>Mais. </p>
<ul>
<li>Lorsque j'utilise Provide dans la méthode de configuration de <code>header.vue</code> et Inject dans la méthode de configuration de <code>container-nav.vue</code>, je peux utiliser <code> ;this.navHome</code> accède à <code>navHome</code> Je ne sais pas pourquoi il fait ça. ≪/li>
</ul><p><br /></p>
