Vue sur les événements prêts ou installés pour l'ensemble de l'application et tous ses composants
P粉052686710
P粉052686710 2023-08-26 16:27:47
0
1
488

Je me demandais s'il existe un moyen de vérifier si l'application Vue entière est installée ?

Je charge un script de dialogue qui vérifie certains liens sur la page et leur ajoute un événement de dialogue... mais le problème est qu'il s'exécute trop tôt lors du chargement de la page. Utilisez la fonction .ready() de jQuery. Mais tous les composants ne sont pas installés à ce stade... et certains liens de composants Vue ne sont pas associés à des événements de lien de dialogue.

Je souhaite pouvoir faire quelque chose comme ceci :

$( document ).ready( function() { const app = créerApp(); app.component( 'section-header', SectionHeader ); // plus de composants etc... const MountedApp = app.mount( '#app' ); si (MountApp.ready()) { // charge maintenant mon script de dialogue personnalisé non-vue afin que nous soyons sûrs que le DOM ET tous les composants sont montés. let CsDialog = require( './vendor/cs-dialog.min' ); dialogue = nouveau CsDialog(); dialogue.bindEvents(); } });

P粉052686710
P粉052686710

répondre à tous (1)
P粉776412597

Vous n’avez pas du tout besoin dejQuery.

Applicationmounted()/onMounted()Le hook s'exécutera une fois que tous les composants auront été installés.

Voir aire de jeux ci-dessous.

Les hooks d'application s'exécutent à la fin.

Consultez les informations sur lesLifecycle HooksetonMounted()

const { createApp, onMounted } = Vue const Comp = { props: ['num'], setup(props) { onMounted(() => { console.log(`Comp[${props.num}]: onMounted(): from setup()`)} ); }, mounted() { console.log(`Comp[${this.num}]: mounted(): from Options API`) } } const App = { components: { Comp }, setup() { onMounted(() => { console.log("onMounted(): from setup()")} ); }, mounted() { console.log("mounted(): from Options API") } } const app = createApp(App) app.mount('#app')
#app { line-height: 1.75; } [v-cloak] { display: none; }
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!