So implementieren Sie die Komponentenkommunikation in vue-cli

In diesem Artikel wird hauptsächlich die Methode der Komponentenkommunikation in vue-cli vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Dieser Artikel stellt die Methode der Komponentenkommunikation in vue-cli vor und teilt sie mit allen. Die Details sind wie folgt:

Es gibt drei Arten der Kommunikation zwischen Vue-Komponenten:

1. Die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente
2. Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente 3. Gleiche Kommunikation zwischen Ebenenkomponenten

1. Kommunikation von der übergeordneten zur untergeordneten Komponente

import contents from './components/content';

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

Untergeordnete Komponente:

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

Übergeordnete Komponente:

<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;
  }
}

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

Komponente 2 empfängt:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Komponentenkommunikation in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!