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>
Logo

前往低代码交流专区

更多推荐