Gegenseitiger Wertetransfer und Aufruf von Vue-Eltern-Kind-Komponenten

<Vorlage>
  <div>
    <p class="father">Vaterkomponente</p>
    <child :sid="id"></child>
  </div>
</Vorlage>

<Skript>
Kind aus „./child“ importieren
Standard exportieren {
  Komponenten:
    Kind
  },
  Daten() {
    zurückkehren {
      id:'1234' // Wert wird von der übergeordneten Komponente an die untergeordnete Komponente weitergegeben}
  }
}
</Skript>

<Vorlage>
  <div>
    <p class="child">Untergeordnete Komponente</p>
    <p class="child">Der empfangene Wert der übergeordneten Komponente lautet: {{ sid }}</p>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Requisiten:{
    Seite: {
      Typ: Zeichenfolge,
      Standard: „0“
    }
  },
  // Requisiten:["sid"],
  Daten() {
   zurückkehren { 

   } 
 } 
} 
</Skript>

<Vorlage>
  <div>
    <p class="father">Vaterkomponente</p>
   <p class="father">Empfange den Wert der untergeordneten Komponente: {{childSid}}</p>
    <child @passValue="parentPassValue"></child>
  </div>
</Vorlage>

<Skript>
Kind aus „./child“ importieren
Standard exportieren {
  Komponenten:
    Kind
  },
  Daten() {
    zurückkehren {
      childSid:'' // Erhalte den Wert der untergeordneten Komponente}
  },
  Methoden: {
    parentPassValue(Daten) {
      this.childSid = Daten;
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <p class="child">Untergeordnete Komponente</p>
    <button @click="valueClick">Wert übergeben</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
    }
  },
  Methoden: {
    WertKlick() {
      dies.$emit('passVaule',19)
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <p class="father">Vaterkomponente</p>
    <child @funValue="parentFunValue"></child>
  </div>
</Vorlage>

<Skript>
Kind aus „./child“ importieren
Standard exportieren {
  Komponenten:
    Kind
  },
  Daten() {
    zurückkehren {
    }
  },
  Methoden: {
    übergeordneterFunValue() {
      console.log('Die Funktion in der übergeordneten Komponente wird aufgerufen');
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <p class="child">Untergeordnete Komponente</p>
    <button @click="funClick">Übergeordnete Komponentenmethode aufrufen</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
    }
  },
  Methoden: {
    funClick() {
      dies.$emit('funVaule')
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <p class="father">Vaterkomponente</p>
    <button @click="childClick">Untergeordnete Komponentenmethode aufrufen</button>
    <child ref="meinchild"></child>
  </div>
</Vorlage>

<Skript>
Kind aus „./child“ importieren
Standard exportieren {
  Komponenten:
    Kind
  },
  Daten() {
    zurückkehren {
    }
  },
  Methoden: {
    KindKlick() {
      dies.$refs.mychild.testNum(1)
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <p class="child">Untergeordnete Komponente</p>
</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
    }
  },
  Methoden: {
    testNum(Daten) {
      console.log('Die Methode in der untergeordneten Komponente wird aufgerufen:', data);
    }
  }
}
</Skript>