Que sont les composants dynamiques ? En savoir plus sur les composants dynamiques dans Vue

Que sont les composants dynamiques ? Cet article vous amènera à en apprendre davantage sur les composants dynamiques dans les connaissances essentielles pour démarrer avec Vue, et vous présentera comment implémenter le rendu de composants dynamiques et les composants keep-alive. J'espère que cela sera utile à tout le monde !

1. Qu'est-ce qu'un composant dynamique

Les composants dynamiques font référence à la commutation dynamique de l'affichage et du masquage des composants. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

2. Comment implémenter le rendu de composants dynamiques

vue fournit un composant <component></component> intégré, <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 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔: est spécialement utilisé. pour mettre en œuvre le rendu des composants dynamiques

. L'exemple de code est le suivant :

3. Utilisez keep-alive pour maintenir l'étatPar défaut, l'état du composant ne peut pas être maintenu lors du changement de composant dynamique

. À l'heure actuelle, vous pouvez utiliser le composant <keep-alive></keep-alive> intégré de Vue pour conserver l'état du composant dynamique. L'exemple de code est le suivant : 🎜🎜 🎜🎜 🎜4. La fonction de cycle de vie correspondant au keep-alive 🎜🎜🎜

• 🎜Lorsque le composant 🎜🎜 est mis en cache 🎜🎜, il se déclenchera automatiquement la fonction de cycle de vie 🎜désactivée🎜 du composant. 🎜
• 🎜Lorsque le composant 🎜🎜 est activé🎜🎜, la fonction de cycle de vie 🎜activé🎜 du composant sera automatiquement déclenchée. 🎜

🎜L'exemple de code est le suivant : 🎜🎜🎜🎜Rappel chaleureux : 🎜🎜

• keep-alive mettra en cache les composants internes au lieu de les détruire ;
• Lorsque vous utilisez keep-alive, vous pouvez spécifier quels composants doivent être mis en cache via include ou utiliser l'attribut exclude pour spécifier quels composants doivent être mis en cache ; pas besoin d'être mis en cache ; Cependant : n'utilisez pas les deux attributs include et exclude en même temps ; , l'attribut include de keep-alive🎜🎜 L'attribut 🎜🎜include est utilisé pour spécifier : seuls les 🎜composants dont les noms correspondent🎜 seront mis en cache. Utilisez des 🎜virgules anglaises🎜 pour séparer plusieurs noms de composants.  :🎜🎜L'exemple de code est le suivant : 🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜, 🎜Vidéo de programmation de base🎜. )🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!