html component标签,Component 标签

[TOC]

``标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件

1. 我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

~~~

var componentA={

template:`

I'm componentA

`

}

var componentB={

template:`

I'm componentB

`

}

var componentC={

template:`

I'm componentC

`

}

~~~

2. 我们在构造器的components选项里加入这三个组件

~~~

components:{

"componentA":componentA,

"componentB":componentB,

"componentC":componentC,

}

~~~

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

~~~

~~~

完整代码

~~~

changeComponent

var componentA = {

template: `

I'm componentA

`

};

var componentB = {

template: `

I'm componentB

`

};

var componentC = {

template: `

I'm componentC

`

};

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';

}

}

}

});

~~~