Eine kurze Analyse des Lebenszyklus und der Datenfreigabe in Vue

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-Tutorial)

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

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

vaters-Kind-Beziehung

---

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

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.

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

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
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:

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 引用页面上的组件实例，则可以按照如下的方式进行操作：

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

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：

3.5 让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。示例代码如下：

3.6 this.$nextTick(cb) 方法

组件的 $nextTick(cb)
3.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:

🎜 🎜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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/57404ec8f54dc8abbf013d712fba3ecf-9.png" class="lazy" 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!