Heim > Artikel > Web-Frontend > 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
<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
🎜🎜aktiviert
🎜 der Komponente automatisch ausgelöst. 🎜keep-alive
speichert interne Komponenten zwischen, anstatt sie zu zerstören;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
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!