1.全局組件央星、局部組件
<body>
<div id="ppa">
<jspan></jspan>
<!-- <panda></panda> panda是局部組件，在此處無(wú)效-->
</div>
<div id="app">
<jspan></jspan>
<panda></panda>
</div>
<script type="text/javascript">
//1.定義全局組件 放到vue的作用域里邊
Vue.component('jspan',{
template:'<div style="color:red">我是全局jspan組件</div>',
})
var app = new Vue({
el:'#app',
//2.定義局部組件
components:{
"panda":{
template:'<div style="color:green">我是局部panda組件</div>',
}
}
})
var app = new Vue({
el:'#ppa',
})
</script>
</body>
2.組件屬性
<body>
<div id="app">
<panda here="China"></panda>
<!-- 此種寫(xiě)法Vue中必須寫(xiě)fromHere -->
<panda from-here="China"></panda>
<panda v-bind:here="message"></panda>
<panda :here="message"></panda>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'China',
},
components:{
"panda":{
template:`<div style="color:green">Panda from {{here}}</div>`,
props:['here'],//數(shù)組惫东，可以傳很多屬性
}
}
})
</script>
</body>
3.組件繼承
<body>
<div id="app">
<panda></panda>
</div>
<script type="text/javascript">
//在Vue外部聲明組件
var cityComponent = {
template:`<div style="color:green;">SiChuan of China.</div>`,
};
var pandaComponent = {
template:`
<div>
<p>Panda from China.</p>
<city></city>
</div>
`,
components:{
"city":cityComponent,//組件繼承
}
};
var app = new Vue({
el:'#app',
data:{
//message:'China',
},
components:{
"panda":pandaComponent,
},
})
</script>
</body>
4.組件標(biāo)簽<component></component>
<body>
<div id="app">
<!-- vue定義的標(biāo)簽 可以使用任意自己聲明的組件-->
<component v-bind:is="who"></component>
<button @click="changeComponent">ChangeComponent</button>
</div>
<script type="text/javascript">
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:pink;">I am componentC</div>`
}
var app = new Vue({
el:'#app',
data:{
who:'componentB'
},
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";
}
}
}
})
</script>
</body>
