Vue 动态组件的使用

最新推荐文章于 2023-06-05 10:59:11 发布

夜跑者

最新推荐文章于 2023-06-05 10:59:11 发布

阅读量328

点赞数

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/104339284

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

Vue 官方文档对动态组件有以下描述：

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里。上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现。

我们写一个使用动态组件的简单例子。

<html>

<head>
    <style type="text/css">

    </style>
</head>

<body>

    <script src="./vue.js"></script>

    <div id="app" >
        <component :is="currentView"></component>
    </div>

    <script>
        var home = {
            template : "<div>home page</div>",
            mounted : function(){
                console.log("home mounted")
            }
        };
        var about = {
            template : "<div>about page</div>",
            mounted : function(){
                console.log("about mounted")
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                index : 0,
                list: [home, about]
            },
            computed: {
                currentView() {                
                    return this.list[this.index];
                }
            }
        })
        setTimeout(() => {
            vm.index = 1;
        }, 5000);
      
    </script>

</body>

</html>

先渲染了home page 5秒后变成了about page。有哪些不明白的地方可以留言。下一篇文章我们看看其中的原理。

夜跑者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 动态组件的使用

Vue 官方文档对动态组件有以下描述：有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里。上述内容可以通过 Vue 的<component>元素加一个特殊的isattribute 来实现。我们写一个使用动态组件的简单例子。<html><head> <style type="text/css">...
复制链接

扫一扫