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

Nehmen Sie app.vue als übergeordnete Komponente , Inhalt. vue als untergeordnete Komponente

1. Importieren Sie die untergeordnete Komponente in die übergeordnete Komponente (Unterkomponentenexport)

import contents from './components/content';

Registrieren Sie die untergeordnete Komponente in der übergeordneten Komponente

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

3. Untergeordnete Komponente Daten über Requisiten empfangen

2. Kommunikation zwischen untergeordneter und übergeordneter Komponente

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;为向父组件传递的数据
  }
}

2. Nicht-Eltern-Kind-Komponentenkommunikation

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

Komponente 1 löst aus:

//把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:

So implementieren Sie die mobile Anpassung in vue-cli

So implementieren Sie das Anzeigefeld in der Vue-Komponente Toast Effect

Über die Verarbeitung von Regelparametern im Webpack

So implementieren Sie einfache Berechnungen in AngularJS

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!