Comment définir des données non réactives pour les instances de composants dans Vue 3 ?
P粉973899567
P粉973899567 2023-08-25 23:08:24
0
1
568
<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>
P粉973899567
P粉973899567

répondre à tous(1)
P粉404539732

Vous pouvez attacher des propriétés non réactives aux instances de composants directement dans mounted()hook :

<script>
export default {
  // tooltip: null,
  mounted() {
    // this.$options.tooltip = new Tooltip(...)
    this.tooltip = new Tooltip(...)
  },
}
</script>

<template>
  <!-- BEFORE -->
  <i
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      ref="icon"
  />

  <!-- AFTER -->
  <i
      @mouseover="hover = true; tooltip.show();"
      @mouseleave="hover = false; tooltip.hide();"
      @click="tooltip.hide();"
      ref="icon"
  />
</template>

Démo

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal