使用組件的三個(gè)步驟
步驟1:使用import語(yǔ)法導(dǎo)入需要的組件
步驟2:使用components節(jié)點(diǎn)注冊(cè)組件
步驟三:以標(biāo)簽形式使用剛才注冊(cè)的組件
注冊(cè)全局組件
在vue項(xiàng)目的main.ks入口文件中亡脸,通過(guò)vue.component()方法,可以注冊(cè)全局組件查排。
組件的props
props是組件的自定義屬性散休,在封裝通用組件的時(shí)候帅戒,合理地使用props可以極大的提高組件的復(fù)用性舵抹!
props是只讀的?
vue規(guī)定:組件中封裝的自定義屬性是只讀的苏携,程序員不能直接修改props的值贝室,否則會(huì)直接報(bào)錯(cuò):
要想修改props的值,可以把props的值轉(zhuǎn)存到data中畸裳,因?yàn)閐ata中的數(shù)據(jù)都是可讀可寫的
props的default默認(rèn)值
props的type值類型
用type屬性定義屬性的值類型缰犁,如果傳遞過(guò)來(lái)的值不符合此類型,則會(huì)在終端報(bào)錯(cuò)
可定義String怖糊、Boolean帅容、Array等常用類型
props的required必填項(xiàng)
聲明require后說(shuō)明誰(shuí)調(diào)用我必須將需要的屬性傳遞給我否則報(bào)錯(cuò)
組件的生命周期&生命周期的函數(shù)
1.生命周期:是指一個(gè)組件從創(chuàng)建-》運(yùn)行-》銷毀的整個(gè)階段,強(qiáng)調(diào)的是一個(gè)時(shí)間段
2.生命周期函數(shù):是由vue框架提供的內(nèi)置函數(shù)伍伤,會(huì)伴隨著組件的生命周期并徘,自動(dòng)按次序執(zhí)行,強(qiáng)調(diào)的是時(shí)間點(diǎn)扰魂。
3.組件生命周期函數(shù) 的分類
組件之間的數(shù)據(jù)共享
1.組件之間的關(guān)系:
(1)父子關(guān)系
(2)兄弟關(guān)系
2.父子組件之間的數(shù)據(jù)共享
2.1父組件向子組件共享數(shù)據(jù)需要使用自定義屬性麦乞。??
2.2子組件向父組件共享數(shù)據(jù)要使用自定義事件。
3.兄弟組件的數(shù)據(jù)共享方案是EventBus
EventBus的使用步驟
1.創(chuàng)建eventBus.js模塊劝评,并向外共享一個(gè)Vue的實(shí)例對(duì)象
2.在數(shù)據(jù)發(fā)送發(fā)姐直,調(diào)用bus.$emit('事件名稱',要發(fā)送的數(shù)據(jù))方法觸發(fā)自定義事件
3.在數(shù)據(jù)接收方蒋畜,調(diào)用bus.$on('事件名稱'声畏,事件處理函數(shù))方法注冊(cè)一個(gè)自定義事件