Vue 动态组件

最新推荐文章于 2024-05-28 16:22:58 发布

Torey_Li

最新推荐文章于 2024-05-28 16:22:58 发布

阅读量211

点赞数

分类专栏： Vue 文章标签： Vue动态组件

本文链接：https://blog.csdn.net/Torey_Li/article/details/88383671

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-for="(item,index) in tabs" v-on:click="templateStr=item">{{item}}</button>
    <span>{{templateStr}}</span>
    <component v-bind:is="templateStr"></component>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            //注意：发现组件取名为 a,b时，不能显示
        //  tabs:['a','b','c'],
            tabs:["a1","b1","c"],
            templateStr:'a1'
        },
        components:{
          /*  a:{template:'<div>a组件</div>'},
            b:{template:'<div>b组件</div>'},
            */
            a1:{template:'<div>这是子组件1</div>'},
            b1:{template:'<div>这是子组件2</div>'},
            c:{template:'<div>这是子组件3</div>'}
        }
    });
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-for="(item,index) in tabs"
            v-on:click="templateStr=item.value">{{item.name}}</button>
    <component v-bind:is="templateStr"></component>
</div>
<script>
    Vue.component('zhuYe',{
        template:'<div>这是子组件--主页</div>'
    });
    Vue.component('xiangQing',{
        template:'<div>这是子组件--详情</div>'
    });
    Vue.component('upFile',{
        template:'<div>这是子组件--上传</div>'
    });
    new Vue({
        el:"#app",
        data:{
            //注意：发现组件取名为 a,b时，不能显示
            tabs:[{value:'zhuYe',name:'主页'},{value:'xiangQing',name:'详情'},
                {value:'upFile',name:'上传'}],
            templateStr:'zhuYe'
        }/*,
        components:{
            zhuYe:{template:'<div>这是子组件1--主页</div>'},
            xiangQing:{template:'<div>这是子组件2--详情</div>'},
            upFile:{template:'<div>这是子组件3--上传</div>'}
        }*/
    });
</script>
</body>
</html>

Torey_Li

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态组件&lt;/title&gt; &lt;script src="https://cdn.staticfile.org/vue/2
复制链接

扫一扫

专栏目录