Comment implémenter la communication des composants dans vue-cli

Cet article présente principalement la méthode de communication des composants dans vue-cli. L'éditeur pense qu'elle est plutôt bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Cet article présente la méthode de communication des composants dans vue-cli et la partage avec tout le monde. Les détails sont les suivants :

Il existe trois types de communication entre les composants vue :

1. Le composant parent communique avec le composant enfant
2. 3. Même communication entre les composants de niveau

1. Communication du composant parent au composant enfant

Prenez app.vue comme composant parent , content.vue lorsqu'un composant enfant

1. Importez le composant enfant dans le composant parent (exportation du sous-composant)

import contents from './components/content';

2.

3. Le composant enfant reçoit des données via des accessoires

  data() {
    return {
        test:'0'
    };
  },
  components:{
    'v-header':headers,
    'v-content':contents
  }

<v-content :childs=&#39;test&#39;></v-content>

2. L'enfant communique avec le composant parent

Composant enfant :

Composant parent :

<template>
  <p @click="down()"></p>
</template>

methods: {
  down() {
    this.$emit(&#39;down&#39;,&#39;null&#39;); //主动触发down方法，&#39;null&#39;为向父组件传递的数据
  }
}

<p>
  <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
</p>
methods: {
  changes(msg) {
    this.test= test;
  }
}

2. Communication du composant non parent-enfant

Déclencheurs du composant 1 :

//把a当作一个中转站
var a = new Vue();

Le composant 2 reçoit :

<p @click="eve"></p>
methods:{
  eve(){
  a.$emit("change",&#39;null&#39;)
 }
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

<p></p>
created(){
  a.$on(&#39;change&#39;,()=>{
    this.msg = &#39;null&#39;
  })
}

Articles connexes :

Comment implémenter l'adaptation mobile dans vue-cli

Comment implémenter la boîte d'affichage dans le composant Vue Toast Effect

À propos du traitement des paramètres de règles dans webpack

Comment implémenter des calculs simples dans AngularJS

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!