vue学习(十六)动态组件

原创于 2018-11-05 22:55:53 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现组件动态切换的方法，通过data属性控制显示不同的子组件，展示了如何利用Vue的component标签和@click事件处理器进行组件切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <component :is="type"></component>
        <!--<child-one v-if="type=='child-one'"></child-one>
        <child-two v-if="type=='child-two'"></child-two>-->
        <button @click="handleclick">点击</button>
    </div>

    <script>

        Vue.component("child-one",{
            template:'<div v-once>child-one</div>'
        })

        Vue.component("child-two",{
            template:'<div v-once>child-two</div>'
        })

        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                type:''
            },
            methods:{
                handleclick:function () {
                    this.type=this.type=='child-one'?'child-two':'child-one'
                }
            }
        })
    </script>
</body>
</html>