Heim > Web-Frontend > View.js > Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

青灯夜游
Freigeben: 2022-05-30 12:45:20
nach vorne
2279 Leute haben es durchsucht

Dieser Artikel wird Ihnen dabei helfen, Vue weiter zu erlernen und den Lebenszyklus und den Datenaustausch im Detail vorzustellen. Ich hoffe, er wird für alle hilfreich sein! 1️⃣ 1. Lebenszyklus einer Komponente Zeitraum

. (Teilen von Lernvideos:

vue-Video-TutorialEine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue)

2️⃣ Lebenszyklusfunktion: Es handelt sich um eine integrierte Funktion , die vom Vue-Framework bereitgestellt wird. Sie wird automatisch der Reihe nach

zusammen mit dem Lebenszyklus der Komponente ausgeführt.

? Warme Erinnerung?: Lebenszyklus betont den Zeitraum

und

Lebenszyklusfunktionbetont den Zeitpunkt.

1.2 Klassifizierung der Komponentenlebenszyklusfunktionen

1.3 LebenszyklusdiagrammSie können sich auf das „Lebenszyklusdiagramm“ im offiziellen Vue-Dokument beziehen, um die Komponentenlebensdauer besser zu verstehen Zyklusausführung Der Prozess: https://cn.vuejs.org/v2/guide/instance.html#Lebenszyklusdiagramm

2. Datenaustausch zwischen Komponenten

Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

2.1 Zwischen Komponenten Die Beziehung In der Projektentwicklung sind die häufigsten Beziehungen zwischen Komponenten in die folgenden zwei Arten unterteilt:


vaters-Kind-BeziehungEine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue


brother-Beziehung

2.2 Elternkind Komponenten Der Datenaustausch zwischen

  • Der Datenaustausch zwischen übergeordneten und untergeordneten Komponenten ist weiter unterteilt in:

  • Eltern→Kind
  • gemeinsame Daten

  • Kind→Eltern
gemeinsame Daten

2.2.1 Um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente weiterzugeben

, muss eine übergeordnete Komponente
  • benutzerdefinierte Attribute

    verwenden, um Daten mit einer untergeordneten Komponente zu teilen. Der Beispielcode lautet wie folgt:

  • 2.2.2 Untergeordnete Komponenten teilen Daten mit übergeordneten Komponenten

    Untergeordnete Komponenten teilen Daten mit übergeordneten Komponenten über
benutzerdefinierte Ereignisse

. Der Beispielcode lautet wie folgt:

2.3 Datenaustausch zwischen Geschwisterkomponenten
Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

In vue2.x lautet das Datenaustauschschema zwischen Geschwisterkomponenten

EventBus

.

?Schritte zur Verwendung von EventBus?:
Erstellen Sie das Modul eventBus.js und geben Sie ein Vue-Instanzobjekt extern frei. Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

Auf dem Datensender rufen Sie bus.$ auf Die Methode ('event name', zu sendende Daten) löst ein benutzerdefiniertes Ereignis aus.

Auf dem Datenempfänger rufen Sie bus.$on('event name', Ereignisverarbeitungsfunktion) auf. Methode zum Registrieren eines benutzerdefinierten Ereignisses;

3. Ref-Referenz
3.1 Was ist Ref-Referenz Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

    1️⃣ Ref wird verwendet, um Entwicklern dabei zu helfen,
  1. zu erhalten, ohne auf jQuery angewiesen zu sein. Eine Referenz auf ein DOM-Element oder Komponente. eventBus.js 模块,并向外共享一个 Vue 的实例对象;
  2. 在数据发送方,调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件;
  3. 在数据接收方,调用 bus.$on
  4. 2️⃣ Jede Vue-Komponenteninstanz enthält ein
$refs-Objekt
, das Verweise auf die entsprechenden DOM-Elemente oder -Komponenten speichert. Standardmäßig verweisen die $refs einer

Komponente auf ein leeres Objekt .

Der Code wird wie folgt demonstriert:

3.2 Verwenden Sie ref, um auf DOM-Elemente zu verweisen

Wenn Sie ref verwenden möchten, um auf DOM-Elemente auf der Seite zu verweisen, können Sie dies wie folgt tun:

Der Code wird wie folgt demonstriert:
Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

3.3 Verwenden Sie ref, um auf Komponenteninstanzen zu verweisen.

Wenn Sie ref verwenden möchten, um auf Komponenteninstanzen auf der Seite zu verweisen, können Sie dies tun wie folgt: ref 引用页面上的组件实例,则可以按照如下的方式进行操作:
Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

3.4 控制文本框和按钮的按需切换

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下:
Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

3.5 让文本框自动获得焦点

当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的.focus() 方法即可。示例代码如下:
Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

3.6 this.$nextTick(cb) 方法

组件的 $nextTick(cb) Bildbeschreibung hier einfügen
Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue3.4 Steuern Sie die bedarfsgesteuerte Umschaltung von Textfeldern und Schaltflächen

Verwenden Sie den booleschen Wert inputVisible, um die bedarfsgesteuerte Umschaltung des Textfelds und der Schaltfläche in der Komponente zu steuern. Der Beispielcode lautet wie folgt: Bildbeschreibung hier einfügen

🎜 🎜3.5 Lassen Sie das Textfeld automatisch den Fokus erhalten🎜🎜🎜🎜Wenn Sie möchten, dass das Textfeld nach der Anzeige sofort den Fokus erhält, können Sie einen Referenzverweis darauf hinzufügen und .focus() aufrufen. Code des nativen DOM-Objekts > Methode ist ausreichend. Der Beispielcode lautet wie folgt: 🎜<img src="https://img.php.cn/upload/article/000/000/024/57404ec8f54dc8abbf013d712fba3ecf-9.png" alt="Bildbeschreibung hier einfügen">🎜 🎜🎜 🎜3.6 this.$nextTick(cb)-Methode 🎜🎜🎜🎜 Die <code>$nextTick(cb)-Methode der Komponente verschiebt den cb-Rückruf 🎜, damit er nach dem nächsten DOM-Aktualisierungszyklus ausgeführt wird 🎜. Das gängige Verständnis lautet: Warten Sie, bis das DOM der Komponente aktualisiert ist, bevor Sie die cb-Rückruffunktion ausführen. Dadurch wird sichergestellt, dass die cb-Rückruffunktion auf den neuesten DOM-Elementen ausgeführt werden kann. 🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage