<p>Bei Vue2 gibt es ein ähnliches Problem. Es wird empfohlen, <code>$options</code> zu verwenden. </p> <p>Aber es scheint für Vue 3 nicht zu funktionieren. </p> <p>Zunächst einmal heißt es in der Vue 3-Dokumentation, dass <code>$options</code> schreibgeschützt ist. </p> <p>Wenn ich also versuche, den Tooltip in der Instanz zu initialisieren, wenn die Komponente gemountet wird, erhalte ich ein sehr seltsames Verhalten. Wenn die Tooltips angezeigt werden, werden sie von der zuletzt erstellten Komponente angezeigt, sodass es so aussieht, als ob <code> ; $options</code>ist in irgendeiner Weise „global“? </p> <p>Wenn Sie <code>tooltip</code> in <code>data</code> einfügen, sollte der Tooltip offensichtlich nicht reagieren und ich möchte ihn in <code> ;Daten</Code>. </p> <pre class="brush:html;toolbar:false;"><template> <i :class="['bi ', icon, hover && 'text-primary']" class="bg-body" @mouseover="hover = true; $options.tooltip.show();" @mouseleave="hover = false; $options.tooltip.hide();" @click="$options.tooltip.hide();" style="Cursor: Zeiger" :title="title" ref="icon" /> </template> <script> {Tooltip} aus „bootstrap“ importieren; Standard exportieren { Requisiten: ["Symbol", "Titel"], Tooltip: null, Daten() { zurückkehren { schweben: falsch } }, mount() { this.$options.tooltip = new Tooltip(this.$refs.icon,{ Platzierung: 'unten', Auslöser: 'manuell', Titel: this.title || ''. }); }, } </script> </pre></p>

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