Was sind dynamische Komponenten? Erfahren Sie mehr über dynamische Komponenten in Vue

Was sind dynamische Komponenten? In diesem Artikel erfahren Sie mehr über die dynamischen Komponenten, die für den Einstieg inVueunerlässlich sind, und stellen Ihnen vor, wie Sie dynamisches Komponenten-Rendering und Keep-Alive-Komponenten implementieren. Ich hoffe, dass er Ihnen hilfreich sein wird!

1. Was ist eine dynamische Komponente? Unter dynamischen Komponenten versteht man das dynamische Umschalten der Anzeige und das Ausblenden von Komponenten. (Lernvideo-Sharing:vue-Video-Tutorial)

2. So implementieren Sie dynamisches Komponenten-Rendering

vue bietet eine integrierte-Komponente,wird speziell verwendet um das Rendern dynamischer Komponenten zu implementieren. Der Beispielcode lautet wie folgt:

组件，专门用来实现动态组件的渲染。示例代码如下：

3、使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的组件保持动态组件的状态。示例代码如下：

4、keep-alive 对应的生命周期函数

• 当组件被缓存时，会自动触发组件的deactivated生命周期函数。

• 当组件被激活时，会自动触发组件的activated生命周期函数。

示例代码如下：

温馨提醒：

• keep-alive会把内部的组件进行缓存，而不是销毁组件；
• 使用keep-alive的时候，可以通过include指定哪些组件需要被缓存；或者，通过exclude属性指定哪些组件不需要被缓存；但是：不要同时使用include和exclude这两个属性；

5、keep-alive 的 include 属性

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:3. Verwenden Sie Keep-Alive, um den Status beizubehalten

Standardmäßig kann der Status der Komponente beim Wechseln dynamischer Komponenten nicht beibehalten werden

. Zu diesem Zeitpunkt können Sie die integrierte -Komponente von Vue verwenden, um den Status der dynamischen Komponente aufrechtzuerhalten. Der Beispielcode lautet wie folgt:

4. Die Lebenszyklusfunktion, die dem Keep-Alive entspricht

• Wenn die Komponente zwischengespeichert wird, ist die Komponente deaktiviert Lebenszyklusfunktion.
• Wenn die Komponente aktiviert ist, wird die Lebenszyklusfunktionaktiviertder Komponente automatisch ausgelöst.

Der Beispielcode lautet wie folgt: Warme Erinnerung:

• keep-alivespeichert interne Komponenten zwischen, anstatt sie zu zerstören;
• Wenn Siekeep-aliveverwenden, können Sie überincludeangeben, welche Komponenten zwischengespeichert werden müssen, oder Sie können das Attributexcludeverwenden, um anzugeben, welche Komponenten dies tun sollen Muss nicht zwischengespeichert werden. Verwenden Sie jedoch nicht die beiden Attributeinclude

5 , Keep-Alive-Include-Attribut Das include-Attribut wird verwendet, um anzugeben: Nur Komponenten mit übereinstimmenden Namen werden zwischengespeichert. Verwenden Sie „englische Kommas“, um mehrere Komponentennamen zu trennen )

Das obige ist der detaillierte Inhalt vonWas sind dynamische Komponenten? Erfahren Sie mehr über dynamische Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!