組件是Vue最強大的功能之一。
組件是一組可被復用的具有一定功能，獨立的完整的代碼片段，這個代碼片段可以渲染一個完整視圖結構
組件開發
如何注冊組件？
第一步，在頁面HTML標簽中使用這個組件名稱，像使用DOM元素一樣。(通常是一個自定義元素)。
<div id="app">
<my-component></my-component>
</div>
第二步，使用Vue.extend方法創建一個組件
var MyComponent = Vue.extend({
// .........
})
在extend方法中接收一個對象.
這個對象是一個描述組件的對象，它具有Vue實例化對象上的屬性方法，它還有一些特殊的屬性
template：組件內部渲染模的板字符串
props：父組件向組件內部傳入數據的引用
<div id="app">
<input type="text" v-model="inputVal"/>
<my-component msg="you" v-bind:inputtext="inputVal"></my-component>
</div>
想在template里用這個msg和inputVal
組件內部還沒有這個msg和inputVal
v-bind是為了創造個js環境
所以將組件中的屬性值引入組件內部通過props屬性
var MyComponent = Vue.extend({
props:['msg','inputtext'],
//定義模板字符串
template: '<div>hello world!{{msg}}</div>'
})
第三步，使用Vue.component方法注冊組件。
Vue.component('my-component', MyComponent)
eg:
//頁面中使用組件
<div id="app">
<my-component></my-component>
</div>
// 定義組件
var MyComponent = Vue.extend({
//定義模板字符串
template: '<div>hello world!</div>'
})
// 注冊組件
Vue.component('my-component', MyComponent)
//創建vue的實例化對象
new Vue({
el: '#app'
})
結果：
<div id="example">
<div>hello world!</div>
</div
在vue的組件中他是一個獨立個體，因此他的事件，數據等等要綁定在組件的內部不是vue的實例化對象
注意：
子組件向父組件通信，通過子組件實例化對象上的$dispatch方法實現
第一個參數表示消息的名稱
從第二個參數開始表示子組件向父組件傳遞的數據
eg:
var MyComponent = Vue.extend({
template: '<div>hello world!</div><button v-on:click="toUpper"></button>',
methods:{
toUpper:function(){
//具體的邏輯
//作用域 this指的是組件的實例化對象
this.$dispatch("abc",123)
}
}
})
為了接收子組件向父組件傳送的消息。在父組件中訂閱該消息 在events屬性中定義這些消息
屬性表示消息的名稱
屬性值是一個函數，表示處理消息的回調函數，參數是子組件發送消息時候傳遞參數，作用域 vue的實例化對象
new Vue({
el: '#app',
event:{
//接收子組件傳遞的數據 123
'abc':function(){
//作用域 vue的實例化對象
//參數就是[123]
}
}
})
Component元素
一旦向頁面中渲染的時候，就會被刪除，有一個屬性叫做is屬性，通過這個屬性可以確定顯示哪個組件，is是一個自定義屬性，值是一個字符串，想讓他的值是一個變量，要添加v-bind創建js環境。
<div id="app">
<component v-bind:is="view"></component>
</div>
var app = new Vue({
el: '#app',
data: {
view: 'home'//顯示home這個組件
}
})
自定義路由
Vue沒有為我們提供路由，自己定義路由
路由規則比如home首頁，list列表頁，product詳情頁
‘’ 或者 #/home 進入home組件
#list/type/1 進入list組件
#/product/2 進入product組件
function router () {
// 根據hash不同決定渲染哪個頁面
var str = location.hash;
str = str.slice(1);
str = str.replace(/^\//, '')
// 獲取 / 前面的字符串
if (str.indexOf('/') > -1) {
str = str.slice(0, str.indexOf('/'))
}
var map = {
home: true,
list: true,
product: true
}
if (map[str]) {
app.view = str;
} else {
app.view = 'home'
}
}
// 頁面進入的時候，會觸發load事件
window.addEventListener('load', router)
// hash改變時候的事件交hashChange事件
window.addEventListener('hashchange', router)
注意：在組件中定義數據，這些數據不能直接作為data的屬性值，要放在該屬性函數中作為返回值。這樣才能成功設置綁定數據
在vue的實例化對象中寫數據：data后面直接是個{} 就可以獲取數據
var app = new Vue({
el: '#app',
data: {
view: ''
}
})
在組件中獲取數據 數據作為data對象里面函數的返回值獲取。
var HomComponent = Vue.extend({
data: function () {
return {
types: [
{id: 1, title: '美食', url: '01.png'},
{id: 2, title: '電影', url: '02.png'}
]
}
}
})
異步數據的渲染
固定數據我們可以通過同步數據寫在文件中
有時候，頁面中一些數據，需要需要服務器端傳遞過來，這一類數據渲染，我們稱之為異步數據的渲染
異步數據渲染什么時候請求數據？
當組件渲染完畢，會觸發一個created方法，如果這個方法被調用說明這個組件被渲染了
var HomComponent = Vue.extend({
template: Util.tpl('tpl_home'),
data: function () {
return {
types: [
{id: 1, title: '美食', url: '01.png'},
{id: 2, title: '電影', url: '02.png'}
]
}
},
created: function () {
//作用域是組件的實例化對象
/////執行異步數據的獲取發ajax
將數據保存在data中使用。往組件的實例化對象中data中添加
}
})