Vue auf bereite oder installierte Ereignisse für die gesamte Anwendung und alle ihre Komponenten
P粉052686710
P粉052686710 2023-08-26 16:27:47
0
1
558
<p>Ich habe mich gefragt, ob es eine Möglichkeit gibt, zu überprüfen, ob die gesamte Vue-App installiert ist? </p> <p>Ich lade ein Dialogskript, das bestimmte Links auf der Seite überprüft und ihnen ein Dialogereignis hinzufügt ... aber das Problem ist, dass es zu früh ausgeführt wird, wenn die Seite geladen wird. Verwenden Sie die Funktion .ready() von jQuery. Zu diesem Zeitpunkt sind jedoch noch nicht alle Komponenten installiert ... und an einige Vue-Komponentenverknüpfungen sind keine Dialogverknüpfungsereignisse angehängt. </p> <p>Ich möchte in der Lage sein, so etwas zu tun: </p> <pre class="brush:php;toolbar:false;">$( document ).ready( function () { const app = createApp(); app.component( 'section-header', SectionHeader ); // weitere Komponenten etc... const MountedApp = app.mount( '#app' ); if (montiertApp.ready()) { // Laden Sie jetzt mein benutzerdefiniertes Nicht-Vue-Dialogskript, damit wir sicher sind, dass das DOM UND alle Komponenten gemountet sind. let CsDialog = require( './vendor/cs-dialog.min' ); dialog = new CsDialog(); dialog.bindEvents(); } });</pre></p>
P粉052686710
P粉052686710

Antworte allen(1)
P粉776412597

您根本不需要 jQuery

应用程序 mounted()/onMounted() 钩子将在所有组件安装完毕后运行。

请参阅下面的操场。

应用程序挂钩在最后运行。

查看有关 Lifecycle HooksonMounted()

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; }
<div id="app" v-cloak>
<comp v-for="n in 100" :key="n" :num="n"></comp>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage