Vue全局API
Vue中的component标签
component标签是Vue框架自定义的标签，可以动态绑定我们的组件，根据数据的不同更换不同的组件。
1.在构造器外面定义三个component组件
var componentA={
template:`<h1 style="color:red">这是componentA</h1>`
}
var componentB={
template:`<h1 style="color:green">这是componentB</h1>`
}
var componentC={
template:`<h1 style="color:blue">这是componentC</h1>`
}
然后在构造器中声明这三个组件，在components选项里面进行挂载
var test=new Vue({
el:'#demo',
data:{
name:'componentB'
},
components:{
'componentA':componentA,
'componentB':componentB,
'componentC':componentC
}
})
现在制作一个按钮，通过点击按钮实现切换不同的组件:
绑定name数据，根据name的值不同，调用不同的组件
在changeComponent方法中，实现切换不同的component组件的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>component04--component标签</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="demo">
<component :is="name"></component>
<button @click="changeComponent">改变Component组件</button>
</div>
<script type="text/javascript">
var componentA={
template:`<h1 style="color:red">这是componentA</h1>`
}
var componentB={
template:`<h1 style="color:green">这是componentB</h1>`
}
var componentC={
template:`<h1 style="color:blue">这是componentC</h1>`
}
var test=new Vue({
el:'#demo',
data:{
name:'componentB'
},
components:{
'componentA':componentA,
'componentB':componentB,
'componentC':componentC
},
methods:{
changeComponent:function(){
if(this.name=="componentA"){
this.name="componentB"
}else if(this.name=="componentB"){
this.name="componentC"
}else{
this.name="componentA"
}
}
}
})
</script>
</body>
</html>
注意：利用v-bind指令绑定data里面的数据，初始化是默认选择第一个组件：componentA
运行结果：
