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

Vue.component('component2', {

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

data() {

rrreee

}🎜})🎜🎜Dans le code ci-dessus, nous ajoutons 1 à la valeur count dans la variable $global dans l'objet window dans le composant de page 1 , et obtenez la valeur de count dans un autre composant à la page 2. 🎜🎜Résumé🎜🎜Ce qui précède est un moyen de transférer des données entre différentes pages lors de l'utilisation de CDN pour introduire le framework Vue. En définissant une variable globale en mémoire via l'objet window, et en accédant et en modifiant cette variable, le transfert de données entre plusieurs pages peut être réalisé. Cette méthode ne nécessite pas le téléchargement d'autres fichiers de bibliothèque, ne nécessite pas de sérialisation ni de désérialisation des données et prend en charge le stockage de divers types de données. Bien entendu, cette méthode présente également certains inconvénients. Par exemple, elle ne convient pas aux données qui doivent être mises à jour fréquemment, car chaque page doit relire la valeur de la variable, ce qui peut entraîner des problèmes de performances. 🎜🎜Enfin, il est important de noter que les données étant stockées en mémoire, elles seront perdues après la fermeture du navigateur. Si vous devez stocker des données de manière persistante, veuillez utiliser localStorage ou sessionStorage pour y parvenir. 🎜

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!