寫在前面： 我是「揚帆向海」，這個暱稱來源於我的名字以及女朋友的名字。我熱愛技術、熱愛開源、熱愛編程。
技術是開源的、知識是共享的。
這博客是對自己學習的一點點總結及記錄，如果您對 Java、算法 感興趣，可以關注我的動態，我們一起學習。
用知識改變命運，讓我們的家人過上更好的生活。
此時是凌晨兩點，我坐在電腦桌前寫Bug。女朋友睡眼朦朧的跟我說 “揚帆，還不睡覺嗎？你以前給我講的vue中的 過濾器、指令、生命週期，我現在都學會了。你可以給我講講
組件的知識嗎？”
我： “可以，正好明天休息”
一、什麼是組件
組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統讓我們可以用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象爲一個組件樹：
二、組件的聲明及使用
1. 全局組件
註冊一個全局組件語法格式如下：
Vue.component(tagName, options)
tagName 爲組件名，options 爲配置選項。註冊後，我們可以使用以下方式來調用組件：
<tagName></tagName>
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用組件 -->
<my-component></my-component>
</div>
<script>
// 註冊組件
Vue.component('myComponent', {
template: ' <h1>Hello! 我是全局註冊組件！</h1>'
})
// 創建 Vue 實例
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
測試結果：
全局註冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構建系統，全局註冊所有的組件意味着即便你已經不再使用一個組件了，它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 JavaScript 的無謂的增加。
有時候由於不需要全局註冊每個組件。可以讓組件只能用在其它組件內，用實例選項 components 註冊。這就有了局部註冊組件！
2. 局部註冊
局部組件只能在當前註冊它的vue實例中使用
代碼示例：
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="templ">
<h1>Hello! 我是局部註冊組件</h1>
</template>
<script>
// 創建 Vue 實例
var vm = new Vue({
el: '#app',
data: {},
components: { // 定義實例內部的私有屬性
myComponent: {
template: '#templ'
}
}
})
</script>
</body>
測試結果：
3. 組件使用注意事項
① 組件名稱如果是使用駝峯法命名，使用組件的時候要將大寫字母改爲小寫，並且在前面加上 - ；
② 組件中的tamplate屬性必須有一個唯一的根元素，否則會報錯；
這個錯誤的意思是： 組件模板應該只包含一個根元素。應該按如下的方法來寫：
三、組件的複用
有時候由於實際需要，有時候需要將組件進行任意次數的複用
代碼示例：
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<template id="templ">
<button class="btn" @click="toClick">點擊了{{count}}次</button>
</template>
<script>
var dataObj = {
count: 0
}
Vue.component('button-counter', {
template: '#templ',
data: function () {
// data 選項是一個對象
return dataObj
},
methods: {
toClick: function () {
this.count += 1;
}
}
})
var vm = new Vue({
el: '#app',
data: {}
});
</script>
</body>
測試結果：
1. 遇到的問題
從測試結果可以看出，當點擊一個按鈕的時候，其它實例的值也會跟着改變。
原因是：data 選項是一個對象，會影響到其它實例。
2. 解決問題
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>組件複用</title>
<script src="js/vue.js"></script>
<style>
.btn {
text-align: center;
color:white;
background-color: green;
font-size: 15px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<template id="templ">
<button class="btn" @click="toClick">點擊了{{count}}次</button>
</template>
<script>
Vue.component('button-counter', {
template: '#templ',
data: function () {
// data 選項是一個函數，組件不相互影響
return {
count: 0
}
},
methods: {
toClick: function () {
this.count += 1;
}
}
})
var vm = new Vue({
el: '#app',
data: {}
});
</script>
</body>
</html>
測試結果：
上面例子中，可以看到 button-counter 組件中的 data不是一個對象，而是一個函數。注意當點擊按鈕時，每個組件都會各自獨立維護它的 count。因爲每用一次組件，就會有一個它的新實例被創建。
這樣做的好處：就是每個實例可以維護一份被返回對象的獨立的拷貝，如果 data 是一個對象則會影響到其它實例。
注意：
組件的 data 和實例的 data 不一樣，
實例中的 data 可以是一個對象，但是組件中的 data 必須是一個函數。
今天就到這兒吧！下一次我再介紹 Vue父子組件傳值 的問題。
由於水平有限，本博客難免有不足，懇請各位大佬不吝賜教！