学习笔记(19):Vue2.x从入门到实战-Component 标签

立即学习:https://edu.csdn.net/course/play/6823/135329?utm_source=blogtoedu

Complate标签

在构造器外部定义三个不同的组件：

var ComponentA={
        template:`<div style="color:red;">I am ComponentA</div>`
    }
    var ComponentB={
        template:`<div style="color:green;">I am ComponentB</div>`
    }
    var ComponentC={
        template:`<div style="color:blue;">I am ComponentC</div>`
    }

在构造器中的components加入上述三个组件

components:{
            "ComponentA":ComponentA,
            "ComponentB":ComponentB,
            "ComponentC":ComponentC
        }

我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。

<component :is="who"></component>

data:{
            who:'ComponentA'
        }

给页面加一个按钮并赋予点击事件，点击一下就切换组件

<div id="app">
    <component :is="who"></component>
    <p><button @click="changecomponent">change Component</button></p>
</div>

var ComponentA={
        template:`<div style="color:red;">I am ComponentA</div>`
    }
    var ComponentB={
        template:`<div style="color:green;">I am ComponentB</div>`
    }
    var ComponentC={
        template:`<div style="color:blue;">I am ComponentC</div>`
    }
    var app = new Vue({
        el:'#app',
        data:{
            who:'ComponentA'
        },
        components:{
            "ComponentA":ComponentA,
            "ComponentB":ComponentB,
            "ComponentC":ComponentC
        },
        methods:{
            changecomponent:function () {
                if(this.who=="ComponentA"){
                    this.who='ComponentB';
                }else if(this.who=="ComponentB"){
                    this.who='ComponentC';
                }else{
                    this.who='ComponentA';
                }
            }
        }
    })

新人一枚，若有不足，请指正！