組件簡介#
組件系統(tǒng)：組件系統(tǒng)是Vue.js其中一個重要的概念擦盾，它提供了一種抽象嘲驾，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件樹：
組件：組件可以擴展HTML元素迹卢，封裝可重用的HTML代碼辽故，我們可以將組件看作自定義的HTML元素。
組件的創(chuàng)建和注冊#
使用Vue.js組件的三個步驟：創(chuàng)建組件構造器腐碱、注冊組件和使用組件
例子如下：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. #app是Vue實例掛載的元素誊垢，應該在掛載元素范圍內使用組件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.創(chuàng)建一個組件構造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注冊組件，并指定組件的標簽喻杈，組件的HTML標簽為<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
</html>
理解##
- Vue.extend()是Vue構造器的擴展彤枢，調用Vue.extend()創(chuàng)建的是一個組建的構造器
- Vue.extend()構造器有一個選項對象狰晚，選項對象的template屬性用于定義組件要渲染的HTML
- 使用Vue.component()注冊組件的時候筒饰，需要提供兩個參數(shù)，第一個是參數(shù)時組件的標簽壁晒，第二個參數(shù)是組件的構造器
- 組件應該掛載到Vue實例下瓷们，否則它不會生效
全局注冊和局部注冊##
調用Vue.component()注冊組件時，組件的注冊是全局的秒咐，這意味著該組件可以在任意Vue示例下使用谬晕。
如果不需要全局注冊，或者是讓組件使用在其它組件內携取，可以用選項對象的components屬性實現(xiàn)局部注冊攒钳。
上面的示例可以改為局部注冊的方式：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. my-component只能在#app下使用-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.創(chuàng)建一個組件構造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
new Vue({
el: '#app',
components: {
// 2. 將myComponent組件注冊到Vue實例下
'my-component' : myComponent
}
});
</script>
</html>
由于my-component組件是注冊在#app元素對應的Vue實例下的，所以它不能在其它Vue實例下使用雷滋。
<div id="app2">
<!-- 不能使用my-component組件不撑，因為my-component是一個局部組件，它屬于#app-->
<my-component></my-component>
</div>
<script>
new Vue({
el: '#app2'
});
</script>
父組件和子組件##
我們可以在組件中定義并使用其他組件晤斩，這就構成了父子組件的關系焕檬。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<parent-component>
</parent-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var Child = Vue.extend({
template: '<p>This is a child component!</p>'
})
var Parent = Vue.extend({
// 在Parent組件內使用<child-component>標簽
template :'<p>This is a Parent component</p><child-component></child-component>',
components: {
// 局部注冊Child組件，該組件只能在Parent組件內使用
'child-component': Child
}
})
// 全局注冊Parent組件
Vue.component('parent-component', Parent)
new Vue({
el: '#app'
})
</script>
</html>
- var Child = Vue.extend(...)定義一了個Child組件構造器
- var Parent = Vue.extend(...)定義一個Parent組件構造器
- components: { 'child-component': Child }澳泵，將Child組件注冊到Parent組件实愚，并將Child組件的標簽設置為child-component。
-template :'<p>This is a Parent component</p><child-component></child-component>'，在Parent組件內以標簽的形式使用Child組件腊敲。 -
Vue.component('parent-component', Parent)全局注冊Parent組件 - 在頁面中使用<parent-component>標簽渲染Parent組件的內容击喂，同時Child組件的內容也被渲染出來
Child組件是在Parent組件中注冊的，它只能在Parent組件中使用碰辅，確切地說：子組件只能在父組件的template中使用茫负。
請注意下面兩種子組件的使用方式是錯誤的：
- 以子標簽的形式在父組件中使用
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
為什么這種方式無效呢？因為當子組件注冊到父組件時乎赴，Vue.js會編譯好父組件的模板忍法，模板的內容已經(jīng)決定了父組件將要渲染的HTML。
<parent-component>…</parent-component>相當于運行時榕吼，它的一些子標簽只會被當作普通的HTML來執(zhí)行饿序，<child-component></child-component>不是標準的HTML標簽，會被瀏覽器直接忽視掉羹蚣。
- 在父組件標簽外使用子組件
<div id="app">
<parent-component>
</parent-component>
<child-component>
</child-component>
</div>
運行這段代碼原探，瀏覽器會提示以下錯誤
組件注冊語法糖##
以上組件注冊的方式有些繁瑣，Vue.js為了簡化這個過程顽素，提供了注冊語法糖咽弦。
使用Vue.component()直接創(chuàng)建和注冊組件：
// 全局注冊，my-component1是標簽名稱
Vue.component('my-component1',{
template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
el: '#app1'
})
Vue.component()的第1個參數(shù)是標簽名稱胁出，第2個參數(shù)是一個選項對象型型，使用選項對象的template屬性定義組件模板。
使用這種方式全蝶，Vue在背后會自動地調用Vue.extend()闹蒜。
在選項對象的components屬性中實現(xiàn)局部注冊：
var vm2 = new Vue({
el: '#app2',
components: {
// 局部注冊，my-component2是標簽名稱
'my-component2': {
template: '<div>This is the second component!</div>'
},
// 局部注冊抑淫，my-component3是標簽名稱
'my-component3': {
template: '<div>This is the third component!</div>'
}
}
})
使用script或template標簽##
盡管語法糖簡化了組件注冊绷落，但在template選項中拼接HTML元素比較麻煩，這也導致了HTML和JavaScript的高耦合性始苇。
慶幸的是砌烁，Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來。
使用<script>標簽
<!DOCTYPE html>
<html>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>This is a component!</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
template選項現(xiàn)在不再是HTML元素催式，而是一個id函喉，Vue.js根據(jù)這個id查找對應的元素，然后將這個元素內的HTML作為模板進行編譯蓄氧。
注意：使用<script>標簽時函似，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本喉童，瀏覽器在解析HTML文檔時會忽略<script>標簽內定義的內容撇寞。
使用<template>標簽
如果使用<template>標簽顿天，則不需要指定type屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>This is a component!</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
在理解了組件的創(chuàng)建和注冊過程后蔑担，我建議使用<script>或<template>標簽來定義組件的HTML模板牌废。
這使得HTML代碼和JavaScript代碼是分離的，便于閱讀和維護啤握。
另外鸟缕，在Vue.js中，可創(chuàng)建.vue后綴的文件排抬，在.vue文件中定義組件懂从，這個內容我會在后面的文章介紹。
組件的el和data選項##
傳入Vue構造器的多數(shù)選項也可以用在 Vue.extend() 或Vue.component()中蹲蒲，不過有兩個特例： data 和el番甩。
Vue.js規(guī)定：在定義組件的選項時，data和el選項必須使用函數(shù)届搁。
下面的代碼在執(zhí)行時缘薛，瀏覽器會提出一個錯誤
Vue.component('my-component', {
data: {
a: 1
}
})
另外，如果data選項指向某個對象卡睦，這意味著所有的組件實例共用一個data宴胧。
我們應當使用一個函數(shù)作為 data 選項，讓這個函數(shù)返回一個新對象：
Vue.component('my-component', {
data: function(){
return {a : 1}
}
})
