Comment définir des données non réactives pour les instances de composants dans Vue 3 ?
P粉973899567
2023-08-25 23:08:24
<p>Il existe un problème similaire pour Vue2, il est recommandé d'utiliser <code>$options</code>. </p>
<p>Mais cela ne semble pas fonctionner pour Vue 3. </p>
<p>Tout d'abord, la documentation de Vue 3 indique que <code>$options</code> est en lecture seule. </p>
<p>Ainsi, lorsque j'essaie d'initialiser l'info-bulle dans l'instance où le composant est monté, j'obtiens un comportement très étrange, lorsque les info-bulles sont affichées, elles sont affichées à partir du dernier composant créé, il semble donc que <code> ; $options</code>est-il « global » d'une manière ou d'une autre ? </p>
<p>Lorsque vous placez <code>tooltip</code> à l'intérieur de <code>data</code> ;données</code>. </p>
<pre class="brush:html;toolbar:false;"><template>
≪je
:class="['bi ', icône, survol &&
class = "bg-body"
@mouseover="hover = true; $options.tooltip.show();"
@mouseleave="hover = false; $options.tooltip.hide();"
@click="$options.tooltip.hide();"
style="curseur : pointeur"
:titre="titre"
ref="icône"
/>
</modèle>
<script>
importer {Tooltip} depuis "bootstrap" ;
exporter par défaut {
accessoires : ["icône", "titre"],
info-bulle : nulle,
données() {
retour {
survol : faux
}
},
monté() {
this.$options.tooltip = nouvelle info-bulle(this.$refs.icon,{
emplacement : 'en bas',
déclencheur : 'manuel',
titre : ce.titre ||
});
},
}
</script>
</pre></p>
Vous pouvez attacher des propriétés non réactives aux instances de composants directement dans
mounted()
hook :Démo