Communication des composants Vue (tutoriel détaillé)

Cet article vous présente principalement quatre méthodes de communication entre composants Vue, à savoir la communication entre composants parent-enfant, la communication eventBus entre composants non parent-enfant, l'utilisation de localStorage ou de sessionStorage et l'utilisation de Vuex. Les amis dans le besoin peuvent s'y référer. étudiez ensemble ci-dessous.

Avant-propos

Comme nous le savons tous, vue est un framework mvvm, et l'une de ses plus grandes différences par rapport à jquery est celle entre les composants de communication. L'objectif de cet article est de trier les deux premiers, la communication des composants parent-enfant et la communication eventBus. Je pense que les instructions du document Vue sont encore un peu simples et je ne les ai pas comprises la première fois.

• Communication entre les composants parents et enfants

• Communication EventBus entre les composants non parents et enfants

• Utilisation du cache local Communication des composants

• Communication Vuex

La première méthode de communication : communication des composants parent-enfant

Le composant parent transmet les données au composant enfant

Le composant parent doit faire un total de 4 choses

1. import son from './son.js'Introduire le composant enfant fils

2. Enregistrez tous les noms de sous-composants dans components : {"son"}

3. Appliquez le sous-composant dans le modèle du composant parent, 1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d

4. Si vous devez transmettre des données au sous-composant, écrivez simplement 74a0cf1cff41c5fa40ba779f12df3c3e98f9e0de16d4632c0e387ffd4bb1294d

 // 1.引入子组件 
 import counter from './counter'
 import son from './son'

// 2.在ccmponents里注册子组件
 components : {
 counter,
 son
 },

// 3.在template里使用子组件
 <son></son>

 // 4.如果需要传递数据,也是在templete里写
 <counter :num="number"></counter>

dans le modèle. Le composant n'a qu'à faire une chose

1. Utilisez des accessoires pour accepter les données. Les données peuvent être utilisées directement

2. Les données reçues par le sous-composant ne peuvent pas être modifiées. Si vous avez vraiment besoin de le modifier, vous pouvez utiliser des propriétés calculées ou affecter les données à une variable dans les données du composant enfant

 // 1.用Props接受数据
 props: [
  'num'
  ],

// 2.如果需要修改得到的数据,可以这样写
 props: [
  'num'
 ],
 data () {
 return {
  number : this.num
 }
 },

Le composant enfant transmet les données au composant parent.

Le composant parent doit faire un total de 2 choses

Définir l'événement dans le modèle

Écrire la fonction dans les méthodes pour écouter le déclenchement de l'événement de le composant enfant

// 1. 在templete里应用子组件时,定义事件changeNumber
 <counter :num="number"
   @changeNumber="changeNumber"
 >
 </counter>

// 2. 用changeNumber监听事件是否触发
 methods: {
  changeNumber(e){
  console.log('子组件emit了',e);
  this.number = e
  },
 }

Le sous-composant a besoin d'un total de 1 chose

Après les modifications des données, utilisez $emit pour le déclencher

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }

La deuxième méthode de communication : eventBus

La méthode de communication eventBus vise la communication entre les composants non-parents et enfants. Son principe passe toujours par le déclenchement et la surveillance. d'événements.

Mais comme ce sont des composants non parent-enfant, ils ont besoin d'un composant intermédiaire pour les connecter.

Je l'utilise en définissant un composant accessible par tous les composants sur le composant racine, qui est le composant #app L'utilisation spécifique est la suivante

Utiliser eventBus pour transférer des données. Nous avons un total de 3 choses à faire

1. Ajoutez l'attribut Bus au composant de l'application (afin que tous les composants puissent y accéder via this.$root.Bus et qu'il ne soit pas nécessaire d'introduire de fichiers)

2. Dans le composant In 1, this.$root.Bus.$emit déclenche l'événement

3. Dans le composant 2, this.$root.Bus.$on surveille l'événement

// 1.在main.js里给app组件,添加bus属性
import Vue from 'vue'
new Vue({
 el: '#app',
 components: { App },
 template: &#39;<App/>&#39;,
 data(){
 return {
 Bus : new Vue()
 }
 }
})

// 2.在组件1里,触发emit
increment(){
 this.number++
 this.$root.Bus.$emit('eventName', this.number)
 },

// 3.在组件2里,监听事件,接受数据
mounted(){
 this.$root.Bus.$on('eventName', value => {
 this.number = value
 console.log('busEvent');
 })
},

Le troisième type de méthode de communication : utiliser localStorage ou sessionStorage

Ce type de communication est relativement simple. L'inconvénient est que les données et le statut sont confus et difficiles à utiliser. maintenir.

Obtenez des données via window.localStorage.getItem(key)

Stockez les données via window.localStorage.setItem(key,value)

Remarque : Utilisez JSON.parse() / JSON.stringify() pour faire Conversion du format de données.

La quatrième méthode de communication : utiliser Vuex

Vuex est plus compliqué, vous pouvez écrire un article séparé

Ce qui précède c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Utilisation de SpringMVC pour résoudre les requêtes inter-domaines Vue

Nouvelles fonctionnalités du webpack 4.0.0-beta.0 version (tutoriel détaillé)

Comment implémenter la transmission de valeurs et la communication dans les composants vue2.0

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!