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

原创已于 2022-10-16 16:02:51 修改 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #组件 #动态组件

于 2021-10-27 20:49:04 首次发布

vue学习笔记专栏收录该内容

36 篇文章

订阅专栏

本文探讨了Vue.js中的动态组件及其应用场景，详细解释了如何通过<component>标签实现组件动态切换，并介绍了keep-alive的作用，即保留组件状态以避免重新渲染。示例代码展示了动态组件的使用方式，同时指出在切换组件时若需保持数据状态，需借助keep-alive来实现。

1.动态组件

定义

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

应用场景

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

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>