Die untergeordnete VUEJS 2.0-Komponente greift auf die übergeordnete Komponente zu bzw. ruft diese auf

Das Folgende ist ein Beispiel dafür, wie eine VUEJS 2.0-Unterkomponente auf eine übergeordnete Komponente zugreift/aufruft. Es hat einen sehr guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Manchmal muss die untergeordnete Komponente aufgrund von Layoutproblemen Daten an die übergeordnete Komponente übergeben und eine bestimmte Methode der übergeordneten Komponente ausführen. Ich werde nicht auf den Code eingehen:

Untergeordnete Komponente:

<template> 
 <p class="isShowing" ref="isShowing"> 
 <p class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> 
  <ul ref="scroll_warpper_ul"> 
  <li class="menu-item" @click="goToFatherDetail(233)"> 
   
  </li> 
  </ul> 
 </p> 
 <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
 </p> 
</template> 
 
<script type="text/ecmascript-6"> 
 
 export default { 
 methods: { 
  goToFatherDetail (itemId) { 
  // this.$parent.$router.push(&#39;goToDetail&#39;); 
  console.log(&#39;子组件方法走了&#39; + itemId); 
  this.$emit(&#39;refreshbizlines&#39;, itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
 
  } 
 } 
 }; 
</script>

Übergeordnete Komponente:

<template> 
 <p class="main-wrapper"> 
  <p class="tab-wrapper"> 
  <p class="tab-item"> 
   <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
  </p> 
  <p class="tab-item"> 
   <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
  </p> 
  </p> 
 </p> 
 <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
 </p> 
</template> 
 
<script type="text/ecmascript-6"> 
 
 export default { 
 methods: { 
  goToDetail (itemId) { 
  console.log(&#39;父组件走你：&#39; + itemId); 
  } 
 }<strong> 
 }; 
</script></strong>

Die übergeordnete Komponente verwendet v-on, um eine Überwachungsfunktion zur Erkennung zu erstellen. Der endgültig generierte Code ähnelt

on: {
  "refreshbizlines": function($event) {
  _vm.goToDetail(123)
}
}

Das Prinzip besteht also darin, dass die untergeordnete Komponente auf die Erkennungsfunktion „refreshbizlines“ der übergeordneten Komponente zugreift. Bei Zugriff wird die Funktion unter „refreshbizline“ ausgeführt

goToDetail – also auf die
der übergeordneten Komponente

goToDetail-Funktion

Beachten Sie, dass das

v-on:refreshbizlines="goToDetail"

der übergeordneten Komponente auf dem Modulnamen Ihres übergeordneten Elements platziert werden muss Komponente, die die untergeordnete Komponente aufruft.

Viel Spaß beim Codieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem, dass die Vuex-Methode in der übergeordneten Komponente den Status aktualisiert und die untergeordnete Komponente nicht rechtzeitig aktualisiert und gerendert werden kann

Über die Implementierung des Vue-Kommentar-Frameworks (Implementierung der übergeordneten Komponente)

Das obige ist der detaillierte Inhalt vonDie untergeordnete VUEJS 2.0-Komponente greift auf die übergeordnete Komponente zu bzw. ruft diese auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!