vue keep-alive & dynamic components All In One

vue keep-alive & dynamic components All In One

组件缓存，防止刷新丢失 input 搜索字段数据

keep-alive

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来

1. 为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

2. 注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

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

demo

https://codesandbox.io/s/vue-keep-alive-and-dynamic-components-vgmz3

https://codesandbox.io/s/vue-keep-alive-dynamic-components-all-in-one-jpkho

refs

https://cn.vuejs.org/v2/api/#keep-alive

https://cn.vuejs.org/v2/guide/components-dynamic-async.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---