組件簡介#
組件系統：組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件樹：
組件：組件可以擴展HTML元素，封裝可重用的HTML代碼，我們可以將組件看作自定義的HTML元素。
組件的創建和注冊#
使用Vue.js組件的三個步驟：創建組件構造器、注冊組件和使用組件
例子如下：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. #app是Vue實例掛載的元素，應該在掛載元素范圍內使用組件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.創建一個組件構造器
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()創建的是一個組建的構造器
- Vue.extend()構造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML
- 使用Vue.component()注冊組件的時候，需要提供兩個參數，第一個是參數時組件的標簽，第二個參數是組件的構造器
- 組件應該掛載到Vue實例下，否則它不會生效
全局注冊和局部注冊##
調用Vue.component()注冊組件時，組件的注冊是全局的，這意味著該組件可以在任意Vue示例下使用。
如果不需要全局注冊，或者是讓組件使用在其它組件內，可以用選項對象的components屬性實現局部注冊。
上面的示例可以改為局部注冊的方式：
<!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.創建一個組件構造器
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會編譯好父組件的模板，模板的內容已經決定了父組件將要渲染的HTML。
<parent-component>…</parent-component>相當于運行時，它的一些子標簽只會被當作普通的HTML來執行，<child-component></child-component>不是標準的HTML標簽，會被瀏覽器直接忽視掉。
- 在父組件標簽外使用子組件
<div id="app">
<parent-component>
</parent-component>
<child-component>
</child-component>
</div>
運行這段代碼，瀏覽器會提示以下錯誤
組件注冊語法糖##
以上組件注冊的方式有些繁瑣，Vue.js為了簡化這個過程，提供了注冊語法糖。
使用Vue.component()直接創建和注冊組件：
// 全局注冊，my-component1是標簽名稱
Vue.component('my-component1',{
template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
el: '#app1'
})
Vue.component()的第1個參數是標簽名稱，第2個參數是一個選項對象，使用選項對象的template屬性定義組件模板。
使用這種方式，Vue在背后會自動地調用Vue.extend()。
在選項對象的components屬性中實現局部注冊：
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選項現在不再是HTML元素，而是一個id，Vue.js根據這個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>
在理解了組件的創建和注冊過程后，我建議使用<script>或<template>標簽來定義組件的HTML模板。
這使得HTML代碼和JavaScript代碼是分離的，便于閱讀和維護。
另外，在Vue.js中，可創建.vue后綴的文件，在.vue文件中定義組件，這個內容我會在后面的文章介紹。
組件的el和data選項##
傳入Vue構造器的多數選項也可以用在 Vue.extend() 或Vue.component()中，不過有兩個特例： data 和el。
Vue.js規定：在定義組件的選項時，data和el選項必須使用函數。
下面的代碼在執行時，瀏覽器會提出一個錯誤
Vue.component('my-component', {
data: {
a: 1
}
})
另外，如果data選項指向某個對象，這意味著所有的組件實例共用一個data。
我們應當使用一個函數作為 data 選項，讓這個函數返回一個新對象：
Vue.component('my-component', {
data: function(){
return {a : 1}
}
})
