Partager des exemples de 4 méthodes de communication des composants Vue

Cet article partage principalement avec vous quatre méthodes de communication des composants Vue : la communication entre les composants parents et enfants, la communication eventBus entre les composants non parents et enfants, la communication des composants utilisant le cache local et la communication Vuex. J'espère que cela aide tout le monde.

La première méthode de communication : communication du composant parent-enfant

Le composant parent transmet les données au composant enfant

• Le composant parent doit faire un total de 4 choses Things

• 1.import son from './son.js' Enregistrez tous les noms de sous-composants dans "son"}

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

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

• dans le modèle >                                                                                           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.引入子组件 
     import counter from './counter'     import son from './son'

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

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

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

Données

• Le composant parent doit faire un total de 2 choses

• Définir des événements dans le modèle

• Écrire une fonction dans les méthodes et écouter l'événement déclencheur du sous-composant

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

                                                 🎜>

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

Après les modifications de données, utilisez $emit pour déclencheur
                                                                                                                                
• La méthode de communication eventBus est destinée à la communication entre des composants non-parents et enfants. Son principe passe toujours par le déclenchement et le suivi 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 à tous les composants sur le composant racine, qui est le composant #app L'utilisation spécifique est la suivante
  Utiliser eventBus pour transmettre des données, nous avons un total de 3 choses à faire

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

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

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

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

3. Dans le composant 2, $root.Bus.$on écoute les événements

•                                            Simple, mais l'inconvénient est que les données et l'état sont compliqués et difficiles à maintenir.
Obtenir des données via window.localStorage.getItem(key)

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

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

Veuillez utiliser JSON.parse() / JSON.stringify () Convertir le format des données.

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

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

Recommandations associées :

Partage d'expérience de développement de composants Vue
Explication détaillée de la communication parent-enfant des composants Vue
Explication détaillée du chargement dynamique des instances de composants Vue dans le module de gestion des autorisations

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!