coderwhy vue3typescript版課堂day組件化開發(fā)一

n前面我們是將所有的邏輯放到一個(gè)App.vuep在之前的案例中，我們只是創(chuàng)建了一個(gè)組件p如果我們一個(gè)應(yīng)用程序?qū)⑺械倪壿嫸挤旁谝粋€(gè)組件中，那么這個(gè)組件就會(huì)變成非 p所以組件化 思想應(yīng)該是對(duì)組件進(jìn)行拆分，拆分成一個(gè)個(gè)小的組件p再將這些組件組合嵌套在一起，最終形成我們的應(yīng)用程序n我們來分析一下下面代碼的嵌套邏輯，假如 p我們會(huì)發(fā)現(xiàn)，將所有的代碼邏輯全部放到一個(gè)組件中，代碼是非常的臃腫和難以維p并且在真實(shí)開發(fā)中，我們會(huì)有 p

nn

npApp組件是Header、Main、Footer組件的父組件pMain組件是Banner、ProductList組件的父組件n在開發(fā)過程中，我們會(huì)經(jīng)常遇到需要組件之間相互進(jìn)行通信p比如App可能使用了多個(gè)Header，每個(gè)地方的Header展示的內(nèi)容不同，那么我們就需要使用者傳遞給Headerp又比如我們?cè)贛ain 請(qǐng)求了Banner數(shù)據(jù)和ProductList數(shù)據(jù)，那么就需要傳遞給它們來進(jìn)行展示p也可能是子組件中發(fā)生 ，需要由父組件來完成某些操作，那就需要子組件向父組件傳 n總之，在一個(gè)Vue項(xiàng)目中，組件之間的通信是非常重要的環(huán)節(jié)，所以接下來我們就具體學(xué)

np父組件傳遞給子組件：通過props屬性p子組件傳遞給父組件：通過$emit觸

n在開發(fā)中很常見的就是父子組件之間通信p這個(gè)時(shí)候我們可以通過props來完成組件之間的通信n什么是PropspProps是你可以在組件 一些自定義的p父組件給這些attribute賦值，子組件通過attribute的名稱獲取到對(duì)應(yīng)的值nPropsp方式一：字符串?dāng)?shù)組，數(shù)組中的字符串就是attributep方式二：對(duì)象類型，對(duì)象類型我們可以在指定attribute名稱的同時(shí)，指定它需要傳遞的類型、是否是必須的、

n數(shù)組用法中我們只能說明傳入的attribute的名稱，并不能對(duì)其進(jìn)行 n當(dāng)使用對(duì)象語法的時(shí)候，我們可以對(duì)傳入的內(nèi)容限 p比如指定傳入的attribute的類型p比如指定傳入的attribute是否是必傳的p比如指定沒有傳入時(shí)，attribute的默認(rèn)值

n那么typeppNumberpBooleanpArraypppp

細(xì)節(jié)三：PropnProp的大小寫命名(camelCasevskebab-pHTML中的attribute名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符p這意味著當(dāng)你使用DOM中的模板時(shí)，camelCase(駝峰命名法)的prop名需要使用其等價(jià)的kebab-case(短橫線分隔命名)命名；

n什么是非Prop的Attributep當(dāng)我們傳遞給一個(gè)組件某個(gè)屬性，但是該屬性并沒有定義對(duì)應(yīng)的props或者emits時(shí)，就稱之為非Prop的p常見的包括class、style、id屬性nAttributep當(dāng)組件有單個(gè)根節(jié)點(diǎn)時(shí)，非Prop的Attribute將自動(dòng)添加到根節(jié)點(diǎn)的Attribute

n如果我們不希望組件的根元素繼承attribute，可以在組件中設(shè)置inheritAttrs:p禁用attribute繼承的常見情況是需要將attribute應(yīng)用于根 外的其他元素p我們可以通過$attrs 所有的非props的n多個(gè)根節(jié)點(diǎn)的p多個(gè)根節(jié)點(diǎn)的attribute如果沒有顯示的綁定，那么 告 須手動(dòng)的指定要綁定到哪一個(gè)屬性上

np當(dāng)子組件有一 發(fā)生的時(shí)候，比如在組件中發(fā)生了點(diǎn)擊，父組件需要切換內(nèi)容p子組件有一些內(nèi)容想要傳遞給父組件np首先，我們需要在子組件中定義好在某些情況下觸發(fā) 名稱p其次，在父組件中以v-on的方式傳入 名稱，并且綁定到對(duì)應(yīng)的方法中p最后，在子組件中發(fā)生某 的時(shí)候，根 名稱觸發(fā)對(duì)應(yīng)

n我們封裝一個(gè)CounterO