Props自定義屬性—學習筆記
作者：木棉花潘穎琳
本文主要內容是關于JS自定義組件中的Props屬性。
前言
新的學期又開始啦！這學期筆者繼續學習鴻蒙開發的相關課程，同時也記錄一下自己的學習筆記，養成良好習慣??好好學習，天天向上！！
概述
本文主要內容是關于JS自定義組件中的Props屬性。
正文
自定義組件可以通過props聲明屬性，父組件通過設置屬性向子組件傳遞參數。 props支持類型包括：String，Number，Boolean，Array，Object，Function。
- ?命名使用：prop名采用camelCase (駝峰命名法)形式，在外部父組件傳遞參數時需要使用 kebab-case (短橫線分隔命名) 形式，比如自定義的屬性名稱為compProp，在父組件引用時需要轉換為comp-prop。（駝峰命名法理解：第一個單詞以小寫字母開始；從第二個單詞開始以后的每個單詞的首字母都采用大寫字母，每一個邏輯斷點有一個大寫字母來標記）
- 添加默認值:子組件可以通過固定值default設置默認值，當父組件沒有設置該屬性時，將使用其默認值。此情況下props屬性必須為對象形式，不能用數組形式。
// comp1.js
export default {
//僅設置屬性不添加默認值時可用數組形式 props: ['compProp'],
//設置默認值時用對象形式
props: {
"compProp": {
default: '默認值',
},
},
}
<!-- comp1.hml -->
<div class="container">
<text class="title">
{{compProp}}
</text>
</div>
- 自定義組件通過element引入到宿主頁面。代碼中的name屬性指自定義組件名稱(非必填)，組件名稱對大小寫不敏感，默認使用小寫。src屬性指自定義組件hml文件路徑(必填)，若沒有設置name屬性，則默認使用hml文件名作為組件名。
<!-- index.hml -->
<element name="mycomp" src="../../comps/comp1/comp1.hml"></element>
<div class="container">
<mycomp comp-prop="子組件"></mycomp>
</div>
- 數據單向性:父子組件之間數據的傳遞是單向的，只能從父組件傳遞給子組件，并且子組件不能直接修改父組件傳遞下來的值，但是可以將props傳入的值用data接收后作為默認值，再對data的值進行修改。
<!-- comp2.hml -->
<div class="container">
<text class="title" onclick="childClick">
子組件的值:{{sonCount}}
</text>
</div>
//comp2.js
export default {
props:{
sonCount:{
default:0
}
},
childClick(){
this.sonCount+=1
}
}
<!-- danxiang.hml -->
<element name="comp2" src="../../comps/comp2/comp2.hml"></element>
<div class="container">
<comp2 son-count="{{fatherCount}}"></comp2>
<text onclick="onClick" class="title">
父組件的值:{{fatherCount}}
</text>
</div>
//danxiang.js
export default {
data: {
fatherCount:5
},
onClick(){
this.fatherCount+=2
}
}
$watch 感知數據改變：
如果需要觀察組件中屬性變化，可以通過$watch方法增加屬性變化回調。可以觀察data和props中定義的屬性。
// comp1.js
export default {
props: {
compProp: {
default: '默認',
},
},
onInit() {
//添加對屬性變化的監聽，監聽綁定的函數為自定義的onPropertyChange
this.$watch('compProp', 'onPropertyChange');
},
//定義一個監聽屬性變化的函數回調
onPropertyChange(newV, oldV) {
console.info('compProp 屬性變化，新值為：' + newV + '，舊值為：' + oldV);
}
}
<!-- index.hml -->
<element name="mycomp" src="../../comps/comp1/comp1.hml"></element>
<div class="container">
<!-- 給自定義屬性綁定數據，通過修改綁定的數據觸發屬性變化的監聽-->
<mycomp comp-prop="{{title}}"></mycomp>
<button onclick="change" style="height: 100;width: 30%;font-size: 30fp;">按鈕</button>
</div>
export default {
data: {
title: "子組件"
},
//改變子組件自定義屬性綁定的數據，從而觸發對屬性變化的監聽
change(){
this.title = "鴻蒙";
}
}
computed 計算屬性：
自定義組件中在讀取或設置某個屬性時進行預先處理時，就需要使用computed字段。computed字段中可通過設置屬性的getter和setter方法在屬性讀寫的時候進行觸發。
在computed字段中定義一些函數，這些函數就叫做“計算屬性”。定義的時候雖然是函數樣式，但是在引用“計算屬性”的時候不要加()，就當作普通屬性引用即可。
computed用來監控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進行數據綁定展示出結果或者用作其他處理。
//index.js
data: {
title: "子組件",
xing:"1",
ming:"2"
},
computed: {
name: {
get() {
return this.xing+this.ming;
},
set(){
console.info("set name"+this.name)
}
},
},
onclick1(){
this.xing="李"
},
onclick2(){
this.ming="華"
},
onclick3(){
this.name="abcd"
}
// comp1.js
export default {
data() {
return {
objProp: this.compProp,
time: 'Today',
};
},
props: {
compProp: {
default: '默認',
},
},
computed: {
message() {
return this.time + ' ' + this.objProp;
},
notice: {
get() {
return this.time;
},
set(newValue) {
this.time = newValue;
},
},
},
onClick() {
console.info('get click event ' + this.message);
this.notice = 'Tomorrow';
},
}
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2295。
責任編輯：jianghua
來源：
51CTO開源基礎軟件社區
