Comment définir des données non réactives pour les instances de composants dans Vue 3 ?

Question

Il existe un problème similaire pour Vue2, il est recommandé d'utiliser $options.

Mais cela ne semble pas fonctionner pour Vue 3.

Tout d'abord, la documentation de Vue 3 indique que $options est en lecture seule.

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 ; $optionsest-il « global » d'une manière ou d'une autre ?

Lorsque vous placez tooltip à l'intérieur de data ;données.

<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>

Answer 1

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