Web-Frontend
View.js
So übergeben Sie einen Wert von der Vue-Unterkomponente an die übergeordnete Komponente
So übergeben Sie einen Wert von der Vue-Unterkomponente an die übergeordnete Komponente
Jul 27, 2021 am 11:29 AM
Methoden für Vue-Unterkomponenten zum übergeben von Werten an übergeordnete Komponenten: 1. Die Unterkomponente l?st aktiv Ereignisse aus, um Daten an die übergeordnete Komponente zu übergeben. 2. Binden Sie die Referenz an die Unterkomponente und definieren Sie eine Funktion, die die übergeordnete Komponente direkt aufrufen kann. Die übergeordnete Komponente registriert die Unterkomponente, bindet dann die Referenz und ruft die Funktion der Unterkomponente auf, um Daten abzurufen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Zun?chst l?st die Unterkomponente das Ereignis aktiv aus und übergibt die Daten an die übergeordnete Komponente
1. Binden Sie ein Ereignis und die durch das Ereignis ausgel?ste Funktion an die Unterkomponente
Unterkomponentencode
<template> <div> <Tree :data="treeData" show-checkbox ref="treeData"></Tree> <Button type="success" @click="submit"></Button> </div> </template>
Das Ereignis wird in der Unterkomponentenfunktion
submit(){
this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
},2 ausgel?st, binden Sie das Triggerereignis in der übergeordneten Komponente
<AuthTree @getTreeData='testData'> </AuthTree>
Die Triggerfunktion der übergeordneten Komponente zeigt die von der untergeordneten Komponente übergebenen Daten an
testData(data){
console.log("parent");
console.log(data)
},Die von der Konsole gedruckten Daten
Zweitens besteht keine Notwendigkeit, in der untergeordneten Komponente Ereignisse auszul?sen (z. B. Schaltfl?chenklicks, create()-Ereignisse usw.).
Dieser Weg ist viel einfacher,
1
in der Unterkomponente und definieren Sie dann eine Funktion in der Unterkomponente. Diese Funktion kann direkt aufgerufen werden. Der Rückgabewert der Funktion ist als die von uns ben?tigten Daten definiert.<template> <div> <Tree :data="treeData" show-checkbox ref="treeData"></Tree> </div> </template>Dann registrieren Sie die untergeordnete Komponente bei der übergeordneten Komponente, binden Sie die Referenz und rufen Sie die Funktion der untergeordneten Komponente auf, um die Daten abzurufen
getData(){
return this.$refs.treeData.getCheckedNodes()
},Der Funktionsaufruf der übergeordneten Komponente<AuthTree ref="authTree">
</AuthTree>Verwandte Empfehlungen: ?vue.js-Tutorial ?
Das obige ist der detaillierte Inhalt vonSo übergeben Sie einen Wert von der Vue-Unterkomponente an die übergeordnete Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Wie entwickle ich eine vollst?ndige Python -Webanwendung?
May 23, 2025 pm 10:39 PM
Um eine vollst?ndige Python -Webanwendung zu entwickeln, befolgen Sie die folgenden Schritte: 1. W?hlen Sie das entsprechende Framework wie Django oder Flask. 2. Integrieren Sie Datenbanken und verwenden Sie Ormen wie SQLalchemy. 3. Entwerfen Sie das Front-End und verwenden Sie Vue oder React. 4. Führen Sie den Test durch, verwenden Sie PyTest oder Unittest. 5. Anwendungen bereitstellen, Docker und Plattformen wie Heroku oder AWS verwenden. Durch diese Schritte k?nnen leistungsstarke und effiziente Webanwendungen erstellt werden.
Welche Bedeutung hat die Reaktivit?tsumwandlung von Vues (experimentell, dann entfernt) und seine Ziele?
Jun 20, 2025 am 01:01 AM
Reaktivit?tsformInvue3AMEDTosimplifyStellingRectiveAtaTAnyautomatic -TrackingAnagingRiftingRifting -Wirklichkeit mit
Was sind die Kernunterschiede zwischen Vue.js und reagieren in der Komponentenentwicklung?
May 21, 2025 pm 08:39 PM
Die Kernunterschiede zwischen Vue.js und React in der Komponentenentwicklung sind: 1) VUE.JS verwendet die Vorlagensyntax und die Option -API, w?hrend React JSX- und Funktionskomponenten verwendet. 2) Vue.js verwendet reaktionsschnelle Systeme, React verwendet unver?nderliche Daten und virtuelles DOM. 3) Vue.js liefert mehrere Lebenszyklus -Haken, w?hrend React mehr Nutzungseffekthaken verwendet.
Wie k?nnen Internationalisierung (I18N) und Lokalisierung (L10N) in einer VUE -Anwendung implementiert werden?
Jun 20, 2025 am 01:00 AM
Internationalisierung undLokalisationInvueAppsAprimal-HandleDusedthevuei18nPlugin.1.Installvue-i18nvianpMoryarn.2.CreatelocalejsonFiles (z
Was sind die Vorteile der Verwendung von Schlüsselattributen (: Schlüssel) mit V-für-Richtlinien in VUE?
Jun 08, 2025 am 12:14 AM
Verwenden Sie: KeyAttributeWithv-ForinvueSessentialforperformanceAndCorrectBehavior
Wie k?nnen Sie die Wiederholung gro?er Listen oder komplexer Komponenten in VUE optimieren?
Jun 07, 2025 am 12:14 AM
Zu den Methoden zur Optimierung der Leistung gro?er Listen und komplexer Komponenten in VUE geh?ren: 1. Verwenden Sie die Vonce-Richtlinie, um statische Inhalte zu verarbeiten, um unn?tige Aktualisierungen zu reduzieren; 2. Implementieren Sie virtuelle Scrollen und rendern Sie nur den Inhalt des visuellen Bereichs, beispielsweise die Verwendung der Vue-Virtual-Scroller-Bibliothek; 3. Cache-Komponenten durch Keep-Alive oder V-Once, um doppelte Halterungen zu vermeiden. 4. Verwenden Sie berechnete Eigenschaften und H?rer, um die reaktionsschnelle Logik zu optimieren, um den Wiedererlangungsbereich zu verringern. 5. Befolgen Sie die Best Practices, z. B. die Verwendung einzigartiger Schlüssel in V-für, die Vermeidung von Inline-Funktionen in Vorlagen und die Verwendung von Leistungsanalyse-Tools zum Auffinden von Engp?ssen. Diese Strategien k?nnen die Anwendungsflüssigkeit effektiv verbessern.
Was ist die Server -Side -Rendering -SSR in Vue?
Jun 25, 2025 am 12:49 AM
Server-Siderenderering (SSR) InvueimerProveSperformanceAndSoBygeneratingHtmlontheserver
Wie kann V-Modell für die Zwei-Wege-Datenbindung an benutzerdefinierten Komponenten in VUE verwendet werden?
Jun 06, 2025 am 11:41 AM
Um V-Model zur Implementierung der bidemischen Bindung von benutzerdefinierten Komponenten in VUE zu verwenden, müssen Sie zun?chst den Arbeitsmechanismus verstehen. Für benutzerdefinierte Komponenten ben?tigen Sie: 1. Empfangen Sie eine Prop -namens ModelValue; 2. Ausl?sen Sie ein Ereignis mit dem Namen Update: modelValue. Standardm??ig wird es analysiert, sodass die Komponente verwendet werden muss: value = "modelValue" und $ emit ('update: modelValue'), um die Daten zu synchronisieren. Darüber hinaus k?nnen die Requisius- und Ereignisnamen über das Modell angepasst werden: {Prop: 'Checked', Ereignis: 'Change'}, die für verschiedene Arten von Komponenten wie Switches geeignet sind
