component-04 动态绑定组件

<body>
    <div id="app">
        <component v-bind:is="who"></component>   <!-- 动态绑定 -->
        <button @click="changeComponent">changeComponent</button> <!--  点击按钮运行方法里的函数  changeComponent -->

    </div>
</body>
<script type="text/javascript">
        var componentA={
            template:`<div style="color:red;">I'm componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">I'm componentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">I'm componentC</div>`
        }

    var app=new Vue({
            el:"#app",
            data:{
                who:"componentAA"
            },
            components:{
                "componentAA":componentA,  //componentAA是组件名  
                "componentBB":componentB,
                "componentCC":componentC,
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentAA'){
                        this.who='componentBB';
                    }else if(this.who=='componentBB'){
                        this.who='componentCC';
                    }else{
                        this.who='componentAA';
                    }
                }
            }
            
    })
    
</script>