《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件任務(wù)

掌握自定義組件的使用4.4本任務(wù)主要目的是幫助學(xué)生掌握在HarmonyOS應(yīng)用開發(fā)中自定義組件的基本使用方法，以及如何通過自定義事件在父子組件間傳遞數(shù)據(jù)。學(xué)生需要學(xué)習(xí)如何創(chuàng)建自定義組件，如何傳遞props屬性，以及如何通過自定義事件在組件之間進(jìn)行數(shù)據(jù)交互。任務(wù)陳述學(xué)習(xí)目標(biāo)學(xué)習(xí)如何在HarmonyOS應(yīng)用中創(chuàng)建和使用自定義組件。掌握如何通過props傳遞數(shù)據(jù)給自定義組件。學(xué)習(xí)如何在自定義組件內(nèi)部使用自定義事件來實(shí)現(xiàn)父子組件間的數(shù)據(jù)傳遞?；A(chǔ)的HTML、CSS和JavaScript知識(shí)。理解HarmonyOS的基本架構(gòu)和組件系統(tǒng)。了解事件處理和數(shù)據(jù)綁定的基礎(chǔ)知識(shí)。知識(shí)準(zhǔn)備自定義組件是一種非常強(qiáng)大的開發(fā)工具，允許開發(fā)人員創(chuàng)建可重用的代碼塊，用戶可以根據(jù)業(yè)務(wù)需求，將已有的組件組合，封裝成的新組件，可以在工程中多次調(diào)用，增強(qiáng)代碼的可維護(hù)性和可讀性。在本任務(wù)中，我們將詳細(xì)介紹如何創(chuàng)建和使用自定義組件以及組件間的數(shù)據(jù)傳遞。任務(wù)實(shí)施自定義組件與數(shù)據(jù)傳遞01為了使內(nèi)容更具體和實(shí)用，我們將創(chuàng)建一個(gè)“天氣卡片”自定義組件。這個(gè)組件專門用于顯示天氣狀況、溫度和城市名。首先需要?jiǎng)?chuàng)建一個(gè)component目錄專門用于存儲(chǔ)組件代碼，相關(guān)目錄結(jié)構(gòu)如下圖所示：和pages目錄一樣，在組件目錄下存放三類文件，分別是：

weatherCard.hml,weatherCard.css，weatherCard.js。自定義組件與數(shù)據(jù)傳遞其中hml代碼如下：css代碼如下：自定義組件與數(shù)據(jù)傳遞Js代碼如下：自定義組件可以通過props聲明屬性，父組件通過設(shè)置屬性向子組件傳遞參數(shù)，props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。上述代碼中如果父組件沒有傳遞參數(shù)給子組件，那么默認(rèn)值就是北京，晴，22。自定義組件與數(shù)據(jù)傳遞通過element標(biāo)簽進(jìn)行自定義組件的導(dǎo)入。自定義組件的name屬性指自定義組件名稱(非必填)，組件名稱對(duì)大小寫不敏感，默認(rèn)使用小寫。src屬性指自定義組件hml文件路徑(必填)，若沒有設(shè)置name屬性，則默認(rèn)使用hml文件名作為組件名。camelCase(駝峰命名法)的組件名，在外部使用自定義組件時(shí)，需要使用短橫線分隔命名形式。例如組件名稱為weatherCard，那么在使用的時(shí)候使用weather-card。接著我們需要在index.hml文件中使用天氣卡片自定義組件，hml代碼如下所示：自定義組件與數(shù)據(jù)傳遞這里我們有兩個(gè)不同的方法使用自定義組件：自定義組件與數(shù)據(jù)傳遞直接使用自定義組件：這個(gè)例子直接使用了標(biāo)簽，沒有添加任何屬性。這意味著組件將使用在weatherCard.js中定義的默認(rèn)props值（分別為"北京"、"晴"和"22"）。通過props傳遞數(shù)據(jù)給自定義組件：在第二個(gè)<weather-card>標(biāo)簽中，通過props傳遞了city、condition和temperature這三個(gè)屬性的值（分別為"深圳"、"多云"和"28"）。這樣，組件就會(huì)使用這些傳入的值而不是默認(rèn)值。預(yù)覽圖如下：1.自定義組件可以通過props聲明屬性，父組件通過設(shè)置屬性向子組件傳遞參數(shù)。

props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。2.命名使用：prop名采用camelCase(駝峰命名法)形式，在外部父組件傳遞參數(shù)時(shí)需要使用短橫線分隔命名)形式，比如自定義的屬性名稱為compProp，在父組件引用時(shí)需要轉(zhuǎn)換為comp-prop。3.添加默認(rèn)值:子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。4.自定義組件通過element引入到宿主頁面。代碼中的name屬性指自定義組件名稱(非必填)，組件名稱對(duì)大小寫不敏感，默認(rèn)使用小寫。src屬性指自定義組件hml文件路徑(必填)，若沒有設(shè)置name屬性，則默認(rèn)使用hml文件名作為組件名。5.數(shù)據(jù)單向性:父子組件之間數(shù)據(jù)的傳遞是單向的，只能從父組件傳遞給子組件，并且子組件不能直接修改父組件傳遞下來的值，但是可以將props傳入的值用data接收后作為默認(rèn)值，再對(duì)data的值進(jìn)行修改。自定義組件與數(shù)據(jù)傳遞本任務(wù)要點(diǎn)：自定義事件02自定義事件父子組件之間通過props

屬性進(jìn)行數(shù)據(jù)傳遞是單向的，只能從父組件傳遞給子組件，想要通過子組件傳遞數(shù)據(jù)給父組件，那么需要對(duì)父組件進(jìn)行自定義事件。通過自定義事件將父組件的方法傳遞給子組件，子組件中通過this.$emit(‘自定義事件’,{params:‘傳遞參數(shù)’})觸發(fā)事件并向父組件傳遞參數(shù)。這里分別演示無參數(shù)傳遞和有參數(shù)傳遞兩種情況。修改之前的天氣卡片案例，在index.hml文件中使用天氣卡片組件，并且添加自定義事件noParam，index.hml,index.js代碼如下所示：自定義事件1.無參數(shù)傳遞在自定義組件weatherCard.hml文件中添加一個(gè)按鈕用于觸發(fā)事件，代碼如下所示：自定義事件在weatherCard.js文件中自定義noParamEvent方法用于觸發(fā)自定義事件，代碼如下所示：自定義事件預(yù)覽圖如下：自定義事件點(diǎn)擊“點(diǎn)擊按鈕”，打開日志log出現(xiàn)以下界面:修改index.hml，代碼如下所示：index.js，代碼如下所示：自定義事件2.有參數(shù)傳遞在自定義組件weatherCard.hml文件中添加一個(gè)按鈕用于觸發(fā)有參數(shù)事件，代碼如下所示：自定義事件在weatherCard.js文件中自定義withParamEvent方法用于觸發(fā)自定義事件，代碼如下所示：自定義事件預(yù)覽圖如下：自定義事件點(diǎn)擊“點(diǎn)擊按鈕”，打開日志log出現(xiàn)以下界面:上述代碼展示了在一個(gè)HarmonyOS應(yīng)用中如何在自定義組件中自定義事件，并且通過自定義事件接收子組件向上傳遞的數(shù)據(jù)。總結(jié)具體步驟如下：自定義事件父組件使用自定義組件的時(shí)候通過(on|@)event-name="bindParentVmMethod"語法來自定義事件。在父組件的js文件中定義bindParentVmMethod方法，并且編寫自己的業(yè)務(wù)邏輯。如果子組件有數(shù)據(jù)傳遞，那么通過e.detail.key獲取數(shù)據(jù)。在自定義組件的js文件中自定義方法，在自定義方法中通過this.$emit('eventName',{params:'傳遞參數(shù)'})觸發(fā)事件并向上傳遞參數(shù)。在自定義組件的hml文件中通過事件（例如onclick）調(diào)用剛才編寫好的自定義方法?？偨Y(jié)03父組件子組件總結(jié)父組件通過設(shè)置屬性向子組件傳遞參數(shù)，子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。camelCase(駝峰命名法)的組件名，在外部使用自定義組件時(shí)，需要使用短橫線分隔命名形式。子組件總結(jié)