Wie lege ich nicht reagierende Daten für Komponenteninstanzen in Vue 3 fest?

Question

Bei Vue2 gibt es ein ähnliches Problem. Es wird empfohlen, $options zu verwenden.

Aber es scheint für Vue 3 nicht zu funktionieren.

Zunächst einmal heißt es in der Vue 3-Dokumentation, dass $options schreibgeschützt ist.

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 ; $optionsist in irgendeiner Weise „global“?

Wenn Sie tooltip in data einfügen, sollte der Tooltip offensichtlich nicht reagieren und ich möchte ihn in ;Daten.

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

Answer 1

您可以直接在mounted()钩子中将非响应式属性附加到组件实例上：

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

演示