Bagaimana untuk mengakses contoh Vue dalam fail js dalam Vue3?

Question

Dalam Vue2, saya boleh mengakses contoh Vue saya untuk menggunakan komponen yang didaftarkan dalam Vue.

test.js

import Vue from 'vue'

   export function renderLogin () {
     Vue.toasted.show('Please login again', { type: 'error', duration: 2000 })
   }

Dalam kod di atas, saya boleh mengakses pakej panggang kerana saya telah mendaftarkannya menggunakan Vue dalam main.js. Walau bagaimanapun, dalam Vue3, saya tidak boleh menggunakan pakej panggang kerana saya tidak boleh mengakses contoh Vue di dalam fail js.

Perlukan bantuan tentang cara mengakses contoh Vue ('ini') di dalam fail js.

Answer 1

// API komposisi Vue 3

    sssccc

Ini bukan cara yang sama seperti dalam Vue2, tetapi ini mungkin mendedahkan perkara yang anda cari.

---

Jika anda ingin menjadikan pakej tersedia secara global dalam Vue3, anda mungkin perlu menambah kod berikut pada pemalam:

    //* This will help for accessing the toasted instance in other files (plugins)
    app.config.globalProperties.$toasted = toasted;

    //* This will expose the toasted instance in components with this.$toasted
    app.provide('$toasted', toasted);

Dengan cara ini anda boleh mendapatkan contoh panggang menggunakan arahan berikut dalam api pilihan: this.$toasted

Gunakan API komposisi: const { $toasted } = _instance.appContext.app.config.globalProperties;

Dalam pemalam lain: constructor(app) { app.config.globalProperties; }

Answer 2

Selepas seharian mencari, saya dapat mengakses komponen panggang dari contoh vue di dalam fail js.

Mula-mula kita perlu mengeksport contoh aplikasi untuk membacanya dalam fail js

main.js

export const app = createApp({
   render() {
     return h(AppWrapper);
   },
});

Seterusnya, kami perlu mendaftarkan komponen kami dalam GlobalProperties contoh aplikasi.

app.config.globalProperties.$toast = toast;

Kami kini boleh mengimport contoh aplikasi dalam fail js dan mengakses komponen roti bakar

test.js

import { app } from '@/main.js'

app.config.globalProperties.$toast('Toast working fine', {
    type: 'success',
    duration: 2000,
  })

Semoga ini membantu orang lain. Jika ada cara lain/lebih baik, sila beritahu saya. Terima kasih