标签：name alive keep 详解 组件 动态 页面

<component v-bind:is="currentTabComponent"></component>

何为动态组件，如上代码所示，即利用 is 特性，来切换不同的组件，即为动态组件。

动态组件保持状态

有时候，我们希望能保持被动态加载组件的状态，已避免反复重复渲染导致的性能问题。为了能实现保持组件状态的功能，我们可以用一个 <keep-alive> 的元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

虽然用keep-alive会缓存组件，但是也同样带来了问题，就是当我们第二次进入页面时，组件的created和mounted函数不再触发

对于这一问题，有两个解决方案：

• 增加activated()函数,每次进入新页面的时候再获取一次数据
• 在keep-alive中增加一个过滤exclude：name（组件的name）这个方法适用于其中单个

<keep-alive exclude="name">
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

这样，我们就可以在每次进入页面的时候去初始化该页面的数据了。

标签：name,alive,keep,详解,组件,动态,页面
来源： https://www.cnblogs.com/00feixi/p/11810181.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。