30_keep-alive

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
主要用于保留组件状态或避免重新渲染

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>
                <a href="#" @click="which='home'">主页</a>
                <a href="#" @click="which='about'">介绍</a>
            </p>
            <!--<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们-->
            <keep-alive>
                <div :is='which'></div>
            </keep-alive>
            
        </div>
        <script src="js/vue.js"></script>
        <script>
            const Home = {
                template:"<div><h1>主页</h1><input type='text' /></div>"
            };
            const About = {
                template:"<div><h1>介绍</h1><input type='text' /></div>"
            }
            
            var vm = new Vue({
                el:"#app",
                components:{
                    'home':Home,
                    'about':About
                },
                data:{
                    which:'home'
                }
            })
        </script>
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容