Detaillierte Erläuterung der Wertübertragung von nicht über- und untergeordneten Komponenten in Vue3

Die Werteübertragung von nicht über- und untergeordneten Komponenten in vue2 erfolgt hauptsächlich über den Ereignisbus. Dabei wird eine Vue-Instanz erstellt und das Kommunikationsverhalten zwischen nicht über- und untergeordneten Komponenten durch Importieren der Instanz in verschiedene Komponenten implementiert.
Vue3 bietet die Eigenschaften **provide** und **inject**, die eine Kommunikation zwischen nicht über- und untergeordneten Komponenten ermöglichen.
Angenommen, es gibt drei Komponenten: App.vue (übergeordnet), sub1 (untergeordnet), sub2 (untergeordnet von untergeordnet):

<Vorlage>
  <div Stil="border: 1px durchgehend rosa">
    <h1>Ich bin dein Vater</h1>
    👇
    <sub1/>
  </div>
</Vorlage>
<Skript>
  importiere sub1 aus './sub1'
	Standard exportieren {
		Name: "App",
    Komponenten: {
			unter1,
    },
    provide:{ // Definieren Sie provide in der übergeordneten Komponente, um den zu übergebenden Wert zu deklarieren names:['peanut','javascriptKing']
    }
	}
</Skript>
<Stilbereich>
</Stil>

<Vorlage>
  <h2>Ich bin eine untergeordnete Komponente der ersten Ebene</h2>
  👇
  <sub2/>
</Vorlage>
<Skript>
  importiere sub2 aus "./sub2";
	Standard exportieren {
		Name: "sub1",
    Komponenten: {
			unter2,
    }
	}
</Skript>
<Stilbereich>
</Stil>

<Vorlage>
  <h3>Ich bin der Jüngste, der Enkel</h3>
  <div>Ich habe auf das Namensarray der Komponente der obersten Ebene verwiesen ===> {{names}}</div>
</Vorlage>
<Skript>
	Standard exportieren {
		Name: "sub2",
    // Akzeptieren Sie einen ebenenübergreifenden Wert in der untergeordneten Komponente durch inject:['names'],
	}
</Skript>
<Stilbereich>
</Stil>

<Vorlage>
  <div Stil="border: 1px durchgehend rosa">
    <h1>Ich bin dein Vater</h1>
    👇
    <sub1/>
  </div>
</Vorlage>
<Skript>
  importiere sub1 aus './sub1'
	Standard exportieren {
		Name: "App",
    Daten(){
			zurückkehren {
				Namen: ['Erdnuss', 'JavascriptKing']
      }
    },
    Komponenten: {
			unter1,
    },
    /*Wenn Sie es so schreiben, erhalten Sie dies nicht. Dies bedeutet derzeit nur, dass der Umfang im Skript nicht definiert ist*/
    /*bieten:{
			diese.namen,
    }*/
  // Sollte so geschrieben werden provide(){
    	zurückkehren {
    		Namen:diese.namen
      }
    }
	}
</Skript>
<Stilbereich>
</Stil>

<Vorlage>
  <div Stil="border: 1px durchgehend rosa">
    <h1>Ich bin dein Vater</h1>
    👇
    <sub1/>
  </div>
</Vorlage>
<Skript>
  importiere sub1 aus './sub1'
  importiere {berechnet} von 'vue'
	Standard exportieren {
		Name: "App",
    Daten(){
			zurückkehren {
				Namen: ['Erdnuss', 'JavascriptKing']
      }
    },
    Komponenten: {
			unter1,
    },
    /*Wenn Sie es so schreiben, erhalten Sie dies nicht. Dies bedeutet derzeit nur, dass der Umfang im Skript nicht definiert ist*/
    /*bieten:{
			diese.namen,
    }*/
  // Sollte so geschrieben werden provide(){
    	zurückkehren {
    		names:computed(() =>{ this.names.length }) // Verwende die berechnete Eigenschaft, um die Variable zurückzugeben, sodass zwischen den Namen und den Namen in den Daten eine Abhängigkeitsbeziehung besteht}
    },
    montiert() {
    	setzeIntervall(()=>{
    		dies.names.push('Vue King!')
      },1000)
    }
	}
</Skript>
<Stilbereich>
</Stil>