組件分為全局組件和局部組件，所謂全局組件就是你創(chuàng)建的這個(gè)組件可以在多個(gè)實(shí)例當(dāng)中使用，也就是多個(gè)new Vue這樣子。而局部組件呢，是在單個(gè)實(shí)例里面。

管你聽沒懂，看就完了。

帶顏色的代表推薦寫法

首先是全局組件，如下：

const my=Vue.extend({
?template:`
? <div>
? ?<p>我是個(gè)組件</p>
? </div>`
})

Vue.component('cpn-x',my)

也可以這樣寫

如下：

Vue.component('cpn-x',{template:`標(biāo)簽內(nèi)容`})

最后是局部組件，如下：

const my=Vue.extend({
?template:`
? <div>
? ?<p>我是個(gè)組件</p>
? </div>`
})

components:{
'cpn-x': my
}

或者直接在components中直接建立

如下：

components:{

'cpn-x':{

template:`標(biāo)簽內(nèi)容`

}

}

組件也分父子，父當(dāng)中包含子，例如，在父組件里面寫components，里面寫子組件。

有的時(shí)候，看寫在template里面內(nèi)容很亂，而且胡亂加背景色，所以我們這時(shí)候就需要采用組件和模板分離的方法。

普通寫法：

<script type="text/x-template" id="one">
<div>
?<ul>
? ?<li>我是一個(gè)獨(dú)立的模板</li>
?</ul>
</div>
</script>

Vue.component('cpn',{
?template:'#one'
})

適用寫法：

<template id="one">
<div>
?<ul>
? ?<li>我是一個(gè)獨(dú)立的模板</li>
?</ul>
</div>
</template>

Vue.component('cpn',{
?template:'#one'
})