Heim > Artikel > Web-Frontend > 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('goToDetail'); console.log('子组件方法走了' + itemId); this.$emit('refreshbizlines', 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('父组件走你:' + 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:
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!