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 in Vue unerlä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 sind dynamische Komponenten? 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 <component></component>-Komponente, wird speziell verwendet um das Rendern dynamischer Komponenten zu implementieren . Der Beispielcode lautet wie folgt:

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

3、使用 keep-alive 保持状态

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

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 <keep-alive></keep-alive>-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 Lebenszyklusfunktion 🎜aktiviert🎜 der Komponente automatisch ausgelöst. 🎜

🎜Der Beispielcode lautet wie folgt: 🎜🎜🎜🎜Warme Erinnerung: 🎜🎜

• keep-alive speichert interne Komponenten zwischen, anstatt sie zu zerstören;
• Wenn Sie keep-alive verwenden, können Sie über include angeben, welche Komponenten zwischengespeichert werden müssen, oder Sie können das Attribut exclude verwenden, um anzugeben, welche Komponenten dies tun sollen Muss nicht zwischengespeichert werden. Verwenden Sie jedoch nicht die beiden Attribute include

; , 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 vonErfahren Sie mehr über dynamische Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!