Bagaimana untuk menetapkan data tidak responsif untuk contoh komponen dalam Vue 3?
P粉973899567
2023-08-25 23:08:24
<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>
Anda boleh melampirkan sifat tidak reaktif pada kejadian komponen secara terus dalam
mounted()
cangkuk:Demo