Vue内置组件之component标签

最新推荐文章于 2025-07-13 15:12:45 发布

原创最新推荐文章于 2025-07-13 15:12:45 发布 · 1.9w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#Vue自带组件之component标签

十二.vue 专栏收录该内容

60 篇文章

订阅专栏

Vue自带的标签有:component,transition,transition-group,keep-alive,slot
在这里插入图片描述
在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:

代码如下:

<body>
    <div id="app">
        <component :is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let componentA={
            template:`<div>I am componentA</div>`
        }
        let componentB={
            template:`<div>I am componentB</div>`
        }
        let componentC={
            template:`<div>I am componentC</div>`
        }

      let app = new Vue({
        el: '#app',
        data:{
            who:'componentB'
        },
        components:{
            "componentA":componentA,
            "componentB":componentB,
            "componentC":componentC
        },
        methods: {
            changeComponent(){
                if(this.who=="componentA"){
                    this.who="componentB"
                }
                else if(this.who=="componentB"){
                    this.who="componentC" 
                }else{
                    this.who="componentA"  
                }
            }
        },
      })
    </script>
  </body>