Wie man Vue über CDN einführt und einen Werttransfer auf verschiedenen Seiten realisiert

In der Webentwicklung ermöglicht uns die Beliebtheit komponentenbasierter Frameworks, Frontend-Seiten effizienter zu entwickeln und Code besser zu verwalten und zu verwalten. Als eines der Besten wird Vue von immer mehr Front-End-Entwicklern verwendet. Bei der Verwendung von Vue ist es normalerweise erforderlich, Daten zwischen verschiedenen Seiten zu übertragen. In diesem Artikel wird erläutert, wie Sie Vue über CDN einführen und die Datenübertragung zwischen verschiedenen Seiten realisieren.

1. Übergeben von Werten zwischen verschiedenen Seiten

Bei der Entwicklung des Vue-Frameworks müssen wir häufig Daten zwischen verschiedenen Seiten übertragen, zum Beispiel: Wir füllen die Seite aus 1 Einige Informationen müssen auf Seite 2 verwendet werden. Dies erfordert die Implementierung einer seitenübergreifenden Datenübertragung in Vue.

Bei der Datenübertragung können wir Vuex, localStorage, sessionStorage und andere Methoden verwenden. Bei Verwendung von CDN muss Vuex jedoch zugehörige Bibliotheksdateien herunterladen, und localStorage und sessionStorage unterstützen nur die Speicherung von Zeichenfolgentypen. Und wenn wir localStorage oder sessionStorage verwenden, müssen wir die Daten serialisieren und deserialisieren, was nicht nur problematisch ist, sondern auch die Leistung verringert. Daher wird in diesem Artikel eine Methode vorgestellt, die kein Herunterladen anderer Bibliotheksdateien erfordert und verschiedene Datentypen speichern kann.

2. Verwenden Sie das Fensterobjekt

Wenn CDN Vue einführt, können wir das Fensterobjekt verwenden, um Daten zwischen verschiedenen Seiten zu übertragen. Im Vue-Framework können wir eine globale Variable über das Prototypobjekt von Vue definieren:

Vue.prototype.$global = {}

Wie im obigen Code gezeigt, in Vue Im Prototypobjekt ist eine $global-Variable definiert. Diese Variable kann in jeder Komponente verwendet werden und der Wert dieser Variablen bleibt im Speicher, bis der Browser geschlossen wird.

Als nächstes können wir über das Fensterobjekt auf diese Variable zugreifen und ihr einen Wert zuweisen:

window.$global = { count: 0 }

Vue.component('component1', {
template: <button @click="addCount">{{ count }} </button>,
data() {<button @click="addCount">{{ count }}</button>,
 data() {

return {
  count: window.$global.count
}

},
 methods: {

addCount() {
  window.$global.count++
}

}
})

//页面2
Vue.component('component2', {
 template: <span>{{ count }}</span>

return {
  count: window.$global.count
}

rrreee
}

Vue.component('component2', {

data() {

}

Das obige ist der detaillierte Inhalt vonWie man Vue über CDN einführt und einen Werttransfer auf verschiedenen Seiten realisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!