Bagaimana untuk menetapkan data tidak responsif untuk contoh komponen dalam Vue 3?
P粉973899567
P粉973899567 2023-08-25 23:08:24
0
1
567
<p>Terdapat masalah yang sama untuk Vue2, adalah disyorkan untuk menggunakan <code>$options</code>. </p> <p>Tetapi ia nampaknya tidak berfungsi untuk Vue 3. </p> <p>Pertama sekali, dokumentasi Vue 3 mengatakan bahawa <code>$options</code> adalah baca sahaja. </p> <p>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 <kod> ; $options</code>adalah "global" dalam beberapa cara? </p> <p>Apabila meletakkan <kod>tip alat</kod> di dalam <kod>data</kod> ;data</kod>. </p> <pre class="brush:html;toolbar:false;"><template> <i :class="['bi ', ikon, tuding && 'teks-utama']" class="bg-body" @mouseover="tuding = benar; $options.tooltip.show();" @mouseleave="tuding = palsu; $options.tooltip.hide();" @click="$options.tooltip.hide();" style="kursor: penunjuk" :title="tajuk" ref="ikon" /> </template> <skrip> 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 ||. }); }, } </skrip> </pra></p>
P粉973899567
P粉973899567

membalas semua(1)
P粉404539732

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan