Comment introduire Vue via CDN et réaliser un transfert de valeur sur différentes pages

Dans le développement Web, la popularité des frameworks de composants nous permet de développer des pages frontales plus efficacement et de mieux maintenir et gérer le code. En tant que l'un des meilleurs, Vue a été utilisé par de plus en plus de développeurs front-end. Lors de l'utilisation de Vue, il est généralement nécessaire de transférer des données entre différentes pages. Cet article explique comment introduire Vue via CDN et réaliser le transfert de données entre différentes pages.

1. Passage de valeurs entre différentes pages

Dans le développement du framework Vue, nous avons souvent besoin de transférer des données entre différentes pages. Par exemple : nous remplissons certaines informations dans la page 1 et devons les utiliser dans la page 2. données. Cela nécessite la mise en œuvre du transfert de données entre pages dans Vue.

Dans le processus de transfert de données, nous pouvons utiliser Vuex, localStorage, sessionStorage, etc. Cependant, lors de l'utilisation de CDN, Vuex doit télécharger les fichiers de bibliothèque associés, et localStorage et sessionStorage ne prennent en charge que le stockage des types de chaînes. Et lorsque nous utilisons localStorage ou sessionStorage, nous devons sérialiser et désérialiser les données, ce qui est non seulement gênant, mais réduit également les performances. Par conséquent, cet article présentera une méthode qui ne nécessite pas de télécharger d’autres fichiers de bibliothèque et peut stocker différents types de données.

2. Utiliser des objets fenêtre

Lorsque CDN introduit Vue, nous pouvons utiliser des objets fenêtre pour transférer des données entre différentes pages. Dans le framework Vue, nous pouvons définir une variable globale via l'objet prototype Vue :

Vue.prototype.$global = {}

Comme le montre le code ci-dessus, une variable $global est définie dans l'objet prototype Vue. Cette variable peut être utilisée dans n'importe quel composant, et la valeur de cette variable restera en mémoire jusqu'à la fermeture du navigateur.

Ensuite, nous pouvons accéder à cette variable via l'objet window et lui attribuer une valeur :

window.$global = { count: 0 }

En utilisant le code ci-dessus, nous définissons une variable nommée $global sur l'objet window Variable globale et attribuez-lui la valeur {count : 0}.

Lorsque nous devons passer cette variable dans différentes pages, nous pouvons obtenir et modifier sa valeur via l'objet window. Par exemple, nous ajoutons 1 à la valeur de la variable dans un composant de la page 1 et transmettons cette valeur de variable à un composant de la page 2.

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

return {
  count: window.$global.count
}

},
 methods: {

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

}
})

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

return {
  count: window.$global.count
}

méthodes : {
rrreee

})

//Page 2

template : <span>{{ count }} </span>,

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!