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>