vue組件的定義
● 組件(Component)是Vue.js最強大的功能之一
● 組件可以擴展HTML元素，封裝可重用代碼
● 在較高層面上，組件是自定義元素，Vue.js的編譯器為他添加特殊功能
● 有些情況下，組件也可以表現用 is 特性進行了擴展的原生的HTML元素
● 所有的Vue組件同時也都是Vue實例，所以可以接受相同的選項對象（除了一些根級特有的選項），並提供相同的生命周期鈎子
vue組件的功能
1）能夠把頁面抽象成多個相對獨立的模塊
2）實現代碼重用，提高開發效率和代碼質量，使得代碼易於維護
Vue組件封裝過程
● 首先，使用Vue.extend()創建一個組件
● 然后，使用Vue.component()方法注冊組件
● 接着，如果子組件需要數據，可以在props中接受定義
● 最后，子組件修改好數據之后，想把數據傳遞給父組件，可以使用emit()方法
組件使用流程詳細介紹
1、組件創建---有3中方法，extend() <template id=''> <script type='text/x-template' id=''>
A、調用Vue.extend()，創建名為myCom的組件，template定義模板的標簽，模板的內容需寫在該標簽下
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
})
B、<template id='myCom'>標簽創建，需要加上id屬性
<template id="myCom">
<div>這是template標簽構建的組件</div>
</template>
C、<script type='text/x-template' id='myCom'>,需加id屬性，同時還得加type="text/x-template",加這個是為了告訴瀏覽器不執行編譯里面的代碼
<script type="text/x-template" id="myCom1">
<div>這是script標簽構建的組件</div>
</script>
2、注冊組件----有2中方法，全局注冊，局部注冊
A1、全局注冊：一次注冊( 調用Vue.component( 組件名稱，為組件創建時定義的變量 ) )，可在多個Vue實例中使用。
我們先用全局注冊，注冊上面例子中創建的myCom組件
Vue.component('my-com',myCom)
A2、全局注冊語法糖：不需要創建直接注冊的寫法
Vue.component('my-com',{
'template':'<div>這是我的組件</div>'
})
'my-com'為給組件自定義的名字，在使用時會用到，后面myCom對應的就是上面構建的組件變量。
A3、如果是用template及script標簽構建的組件，第二個參數就改為它們標簽上的id值
Vue.component('my-com',{
template: '#myCom'
})
B1、局部注冊：只能在注冊該組件的實例中使用，一處注冊，一處使用
var app = new Vue({
el: '#app',
components: {
'my-com': myCom
}
})
B2、局部注冊語法糖：
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '<div>這是我的組件</div>'
}
}
})
B3、<template>及<script>創建的組件，局部注冊
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '#myCom'
}
}
})
3、調用組件
只需要在調用組件的地方，寫上組件名字的標簽即可
<div>
/*調用組件*/
<my-com></my-com>
</div>
4、例子
A、全局注冊：新建一個html文件，引入vue.js，並且定義2個vue實例app1和app2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
/*創建組件*/
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
});
/*全局注冊組件*/
Vue.component('my-com',myCom);
/*定義vue實例app1*/
var app1 = new Vue({
el: '#app1'
});
/*定義vue實例app2*/
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
可以看到，全局注冊的組件在實例app1和實例app2中都可以被調用。
B、局部注冊：將創建的組件注冊到實例app1下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
});
// Vue.component('my-com',myCom);
/*局部注冊組件*/
var app1 = new Vue({
el: '#app1',
components:{
'my-com':myCom
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
可以看到只渲染了app1實例下的組件，app2實例雖然調用了該組件，但是因為這個組件沒有在其內部注冊，也沒有全局注冊，所以報錯說找不到該組件。
C、template 和script標簽創建組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
<my-com1></my-com1>
</div>
<template id="myCom">
<div>這是template標簽構建的組件</div>
</template>
<script type="text/x-template" id="myCom1">
<div>這是script標簽構建的組件</div>
</script>
<script>
Vue.component('my-com1',{ //全局注冊
template: '#myCom1'
});
var app1 = new Vue({
el: '#app1',
components:{
'my-com':{
template: '#myCom' //局部注冊
}
}
});
</script>
</body>
</html>
5、異步組件
vue作為一個輕量級前端框架，其核心就是組件化開發。我們一般常用的是用腳手架vue-cli來進行開發和管理，一個個組件即為一個個vue頁面，這種叫單文件組件。我們在引用組件之時只需將組件頁面引入，再注冊即可使用。
當項目比較大型，結構比較復雜時，我們一般選用vue-cli腳手架去構建項目。因為vue-cli集成了webpack環境，使用單文件組件，開發更簡單，易上手，尤其是在對組件的處理上。對於原生vue.js，我們就得將組件構建在同一個html的script標簽下或者html的外部js中，所有組件集中在一塊，不容易管理，這也是原生vue,js的一點不便之處
vue.js可以將異步組件定義為一個工廠函數。
使用$.get獲取本地文件會跨域，所以要將項目部署到服務器中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="vue.js"></script>
<script type="text/javascript" src='jquery-3.1.1.min.js'></script>
</head>
<body>
<div id="app1">
<head-com></head-com>
</div>
<script>
Vue.component('head-com', function (resolve, reject) {
$.get("a.html").then(function (res) {
resolve({
template: res
})
});
});
var app1 = new Vue({
el: '#app1'
});
</script>
</body>
</html>
顯示效果如下：
6、Vue中的props數據流
通過在注冊組件中申明需要使用的props，然后通過props中與模板中傳入的對應的屬性名，去取用這些值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="vue.js"></script>
<script type="text/javascript" src='jquery-3.1.1.min.js'></script>
</head>
<body>
<div id='app'>
<my-component name="jiangjiang" come-from="guilin"></my-component>
<!-- 然后在模板中通過屬性傳值的方式進行數據的注入 -->
</div>
<script>
Vue.component('my-component', {
props: ['name', 'comeFrom'], //在注冊組件的時候通過props選項聲明了要取用的多個prop
// 在注冊組件的模板中使用到props選項中聲明的值
template: '<p>我叫：{{name}}, 我來自：{{comeFrom}}</p>',
created: function () {
console.log('在created鈎子函數中被調用')
console.log('我叫：', this.name)
console.log('我來自：', this.comeFrom)
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
注意：
A、props取值的方式
在注冊組件的模板內部template，直接通過prop的名稱取值就Ok
template: '<p>我叫：{{name}}, 我來自：{{comeFrom}}</p>'
不在注冊組件的模板內部template，用this.prop的方式
console.log('我來自：', this.comeFrom)
B、在template選項屬性中，可以寫駝峰命名法，也可以寫短橫線命名法
在HTML(模板)中，只能寫短橫線命名法
原因：vue組件的模板可以放在兩個地方
a、Vue組件的template選項屬性中，作為模板字符串
b、放在.html中[ 用script template標簽創建的組件 ]，作為HTML
問題在於HTML不區分大小寫，所以在vue注冊組件中通用的駝峰命名法，不適用於HTML中的Vue模板，在HTML中寫入props屬性，必須寫短橫線命名法（把原來props屬性中的每個prop大寫換成小寫，並且在前面加“-”）
將6中的
<div id='app'>
<my-component name="jiangjiang" come-from="guilin"></my-component>
<!-- 然后在模板中通過屬性傳值的方式進行數據的注入 -->
</div>
改成
<div id='app'>
<my-component name="jiangjiang" comeFrom="guilin"></my-component>
<!-- 然后在模板中通過屬性傳值的方式進行數據的注入 -->
</div>
顯示效果，第二個沒有顯示
異步組件的實現原理；異步組件的3種實現方式---工廠函數、Promise、高級函數
異步組件實現的本質是2次渲染，先渲染成注釋節點，當組件加載成功后，在通過forceRender重新渲染
高級異步組件可以通過簡單的配置實現loading resolve reject timeout 4種狀態