2021-10-27 vue笔记-组件化开发(五) 动态组件＜component＞和keep-alive

1.动态组件

定义

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

应用场景

通过使用保留的 元素，动态地绑定到它的 is 特性，可以实现动态组件。
它的应用场景往往应用在路由控制或者 tab 切换中。

标签

<component>元素:动态绑定多个组件到它的js属性
<keep-alive>:保留状态,避免重新渲染

2.示例

代码

<div id="app"><component :is="who"></component><footer><ul><li @click="who='home'">home</li><li @click="who='list'">list</li><li @click="who='cart'">cart</li></ul></footer>
</div>
<script>new Vue({
      el: "#app",data: {
      who: "home"},components: {
      'home': {
      template: `<h1>我是首页</h1>`,},'list': {
      template: `<h1>我是详情页</h1>`,},'cart': {
      template: `<h1>我是购物车</h1>`,},},}); </script>

结果

3.keep-alive保留状态,避免重新渲染

上例中切换页面是home等组件不是显示和隐藏,而是删除和新建,所以数据不会保留(若有input文本框,切换回来,原先输入的将会消失)
解决:

    <keep-alive><component :is="who"></component></keep-alive>