Comment communiquer entre composants non parent-enfant dans vue2.0 ?

La colonne Tutoriel Vue.js suivante vous présentera la méthode de communication entre les composants non-parent-enfant de vue2.0. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Dans vue, le composant parent utilise des accessoires pour communiquer avec son composant, et le composant enfant utilise l'événement $emit+ pour communiquer avec le composant parent. et enfant ? , il n'y a que quelques mots dans le document officiel,

Le concept est très vague. Où doit être placée cette instance de vue vide ? pas de description claire. Après avoir vérifié quelques autres informations, j'ai découvert que cette communication non-père-fils est en fait utilisée comme ceci :

Tout d'abord, cette instance vide doit être placée sous le composant racine, afin que tous les sous-composants puissent l'appeler, c'est-à-dire placés dans le .js principal ci-dessous, comme le montre la figure :

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data:{
    Hub:new Vue()
  },
  template: &#39;<App/>&#39;,
  components: { App }
});

Mes deux composants s'appellent child1.vue et child2.vue. Maintenant, je veux. cliquez sur le bouton dans child1.vue pour modifier la valeur dans child2.vue. À ce stade, nous devons utiliser un outil $root pour obtenir :

child1.vue:

<template lang="pug">
  p this is child
    span(@click="correspond") 点击进行非组件之间的通信
</template>
<script>
  export default{
    methods: {
      correspond(){
          this.$root.Hub.$emit("change","改变")
      }

    }
  }
</script>

child2.vue. :

<template lang="pug">
  p this is child2
    span {{message}}
</template>
<script>
  export default{
    data(){
      return {
        message: "初始值"
      }
    },
    created(){
      this.$root.Hub.$on("change", () => {
        this.message = "改变"
      })
    }
  }
</script>

À ce stade, nous pouvons obtenir ce que nous voulons L'effet.

Recommandations associées :

Résumé des questions d'entretien Front-end Vue 2020 (avec réponses)

tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!