Acht Möglichkeiten zur Implementierung von Kommunikation in Vue

<Son :datas="fData"></Son>

<Skript>
importiere Son von '@/components/son'
  Standard exportieren{
    Name:'Vater',
    Komponenten: {Son},
    Daten(){
      zurückkehren {
        fData: „Ich bin der Wert, der von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird – Props-Methode“
      }
    }
  }
</Skript>

<Vorlage>
  <div>Ich bin die Daten der übergeordneten Komponente: {{fData}}</div>
  <div @click=changeData>Ich bin die übergeordnete Komponente, die die geänderten Daten übergibt: {{mydata}}</div>
</Vorlage>
<Skript>
  Standard exportieren{
    Name: 'Sohn',
    Requisiten:{
      fDaten:{
        Typ: Zeichenfolge,
        Standard:''
      }
    }
    Daten(){
      meineDaten:diese.VaterDaten
    },
    Methoden:{
     Daten ändern(){
        this.mydata += 'Daten ändern'
      }
    },
  }
</Skript>

Requisiten:{
    fDaten:{
        Typ: [Zeichenfolge, Zahl],
        Standard:''
    }
}

<el-button @click="handleEmit">Übergeordnete Komponente ändern</el-button>

<Skript>
 Standard exportieren{
   Name: 'Sohn',
   Methoden:{
     handleEmit(){
       this.$emit('triggerEmit','Unterkomponentendaten')
     }
   }
 }
</Skript>

<Son @triggerEmit="changeData"></Son>

<Skript>
 importiere Son von '@/components/son'
 Standard exportieren{
   Name:'Vater',
   Komponenten: {Son},
   Methoden:{
     Daten ändern(Name){
       console.log(name) // => Ich bin die Daten aus der untergeordneten Komponente}
   }
 }
</Skript>

<childA :meinName="name"></ChildA>
<KindB :meinName="Name" @changeName="editName"></KindB>  
    
Standard exportieren{
  Daten() {
    zurückkehren {
      Name: „Hallo Daten“
    }
  },
  Methoden: {
    Name bearbeiten(Name){
      dieser.name = Name
    }
  }
}

<p>Name: {{ meinName }}</p>
<button @click="changeName">Name ändern</button>
    
<Skript>
Standard exportieren{
  Requisiten: {
    meinName:String
  },
  Methoden: {
    ändereName() {
      this.$emit('changeName', 'neuer Datenname')
    }
}
}
</Skript>

<p>Name: {{ neuerName }}</p>
    
<Skript>
Standard exportieren{
  Requisiten: {
    meinName:String
  }
}
</Skript>

Vue von „vue“ importieren
const bus = neuer Vue()
Standardbus exportieren

<Vorlage>
  <div>
    <div>Ich bin Kommunikationskomponente A</div>
    <button @click="changeName">Name ändern</button>
  </div>
</Vorlage>

<Skript>
Bus aus "@/utils/Bus.js" importieren;
Standard exportieren {
  Komponenten: {},
  Daten() {
    zurückkehren {};
  },
  montiert() {
    Konsole.log(Bus);
  },
  Methoden: {
    ändereName() {
      bus.$emit("editName", "Datensatz!");
    },
  },
};
</Skript>

<style lang='scss' scoped>
</Stil>

<Vorlage>
  <div>
  <span>Name: {{name}}</span>
    <div>Ich bin Kommunikationskomponente B</div>
  </div>
</Vorlage>

<Skript>
Bus aus "@/utils/Bus.js" importieren;
Standard exportieren {
  Komponenten: {},
  Daten() {
    gib {name} zurück;
  },
  montiert() {
    bus.$on("editName", (name) => {
        dieser.name=Name
      konsole.log(Name); // 
    });
  },
  Methoden: {},
};
</Skript>

<style lang='scss' scoped>
</Stil>

<Vorlage>
  <div>Ich bin eine untergeordnete Komponente</div>
</Vorlage>

<Skript>
Standard exportieren{
  Name:"Sohn",
  Daten(){
    zurückkehren {
      sonTitle: „Ich bin die Daten der untergeordneten Komponente“
    }
  },
  Methoden:{
    SohnHandle(){
      console.log('Ich bin eine Methode einer Unterkomponente')
    }
  },
  erstellt(){
    konsole.log(dieses.$übergeordnetes)
    console.log(this.$parent.fatherTitle) // => Ich bin die Daten der übergeordneten Komponente this.$parent.fantherHandle() // => Ich bin die Methode der übergeordneten Komponente }
}
</Skript>

<Vorlage>
  <div>
    <Son>Ich bin die übergeordnete Komponente</Son>
  </div>
</Vorlage>

<Skript>
importiere Son aus './son.vue'

Standard exportieren{
  Name: 'Vater',
  Komponenten: {
    Sohn
  },
  Daten(){
    zurückkehren {
      fatherTitle: „Ich bin die Daten der übergeordneten Komponente“
    }
  },
  Methoden:{
    fantherHandle(){
      console.log('Ich bin die Methode der übergeordneten Komponente')
    }
  },
  montiert(){
    Konsole.log(diese.$Kinder)
    console.log(this.$children[0].sonTitle) // => Ich bin die Daten der untergeordneten Komponente this.$children[0].sonHandle() // => Ich bin die Methode der untergeordneten Komponente }
}
</Skript>

<Vorlage>
  <div>
    <Sohn ref="Sohn"></Sohn>
  </div>
</Vorlage>

<Skript>
importiere Son aus './son.vue'

Standard exportieren{
  Name: 'Vater',
  Komponenten: {
    Sohn
  },
  montiert(){
    console.log(this.$refs.son) /*Komponenteninstanz*/
  }
}
</Skript>

/* Übergeordnete Komponente */
Standard exportieren{
 bieten:
   zurückkehren {
     provideName: 'Verkaufs-Frontend'
   }
 }
}

/*Unterkomponente*/
Standard exportieren{
  einfügen: ['provideName'],
  erstellt () {
    console.log(this.provideName) // => "Frontend verkaufen"
  }
}

<Vorlage>
  <div>
    <div Klasse="isSon">
        <slot :info='arrList'></slot>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Komponenten: {},
  Daten() {
    return {arrList:[1,'aa','Nicht verwenden']};
  },
  montiert() {
  },
  Methoden: {
    
  },
};
</Skript>

<Vorlage>
<div>
    <SonG>
        <span slot-scope="Eigenschaften">
            <ul>
                ein
                <li v-for="Artikel in props.info" :key="Artikel">
                    {{Artikel}}
                </li>
            </ul>
        </span>
    </SonG>
</div>
</Vorlage>

<Skript>

importiere SonG aus '../components/SonG.vue'
Standard exportieren {
   Komponenten: {
       Lied
   },
   Daten () {
       zurückkehren {
       }
   }
}
</Skript>

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
  },
  Mutationen:
  },
  Aktionen: {
  },
  Module:
  }
})