Bagaimana untuk menetapkan data tidak responsif untuk contoh komponen dalam Vue 3?

Question

Terdapat masalah yang sama untuk Vue2, adalah disyorkan untuk menggunakan $options.

Tetapi ia nampaknya tidak berfungsi untuk Vue 3.

Pertama sekali, dokumentasi Vue 3 mengatakan bahawa $options adalah baca sahaja.

Jadi apabila saya cuba untuk memulakan petua alat dalam contoh apabila komponen dipasang, saya mendapat tingkah laku yang sangat pelik, apabila petua alat dipaparkan, ia dipaparkan daripada komponen yang dibuat terakhir, jadi nampaknya ; $optionsadalah "global" dalam beberapa cara?

Apabila meletakkan tip alat di dalam data ;data.

import {Tooltip} daripada "bootstrap";

eksport lalai {
  prop: ["ikon", "tajuk"],
  petua alat: null,
  data() {
    kembali {
      hover: palsu
    }

  },
  dipasang() {
    this.$options.tooltip = new Tooltip(this.$refs.icon,{
      penempatan: 'bawah',
      pencetus: 'manual',
      tajuk: this.title ||.
    });
  },

}

Answer 1

Anda boleh melampirkan sifat tidak reaktif pada kejadian komponen secara terus dalam mounted()cangkuk:

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

Demo