vue-动态组件

最新推荐文章于 2023-06-12 09:56:25 发布

@Tiramisu

最新推荐文章于 2023-06-12 09:56:25 发布

阅读量64

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105031631

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

* 元素，动态地绑定多个组件到它的 is 属性
* 保留状态，避免重新渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <keep-alive><!-- 保留状态 -->
            <component :is="who"></component>
        </keep-alive>
        <footer>
            <ul>
                <li><a @click="who='home'">首页</a></li>
                <li><a @click="who='list'">列表页</a></li>
                <li><a @click="who='shopcar'">购物车页面</a></li>
            </ul>
        </footer>
    </div>
    
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#box",
            data: {
                who: 'home'
            },
            
            components: {
                "home": {
                    template: `<div>home<input type="text"></div>`
                },
                "list": {
                    template: `<div>list</div>`
                },
                "shopcar": {
                    template: `<div>shopcar</div>`
                },
            }
        })
    </script>
</body>
</html>

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-动态组件

* 元素，动态地绑定多个组件到它的 is 属性* 保留状态，避免重新渲染<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <div ...
复制链接

扫一扫