Props自定義屬性—學(xué)習(xí)筆記
??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
前言
新的學(xué)期又開始啦！這學(xué)期筆者繼續(xù)學(xué)習(xí)鴻蒙開發(fā)的相關(guān)課程，同時也記錄一下自己的學(xué)習(xí)筆記，養(yǎng)成良好習(xí)慣??好好學(xué)習(xí)，天天向上??！
概述
本文主要內(nèi)容是關(guān)于JS自定義組件中的Props屬性。
正文
自定義組件可以通過props聲明屬性，父組件通過設(shè)置屬性向子組件傳遞參數(shù)。 props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。
- ?命名使用：prop名采用camelCase (駝峰命名法)形式，在外部父組件傳遞參數(shù)時需要使用 kebab-case (短橫線分隔命名) 形式，比如自定義的屬性名稱為compProp，在父組件引用時需要轉(zhuǎn)換為comp-prop。（駝峰命名法理解：第一個單詞以小寫字母開始；從第二個單詞開始以后的每個單詞的首字母都采用大寫字母，每一個邏輯斷點(diǎn)有一個大寫字母來標(biāo)記）
- 添加默認(rèn)值:子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時，將使用其默認(rèn)值。此情況下props屬性必須為對象形式，不能用數(shù)組形式。
// comp1.js
export default {
//僅設(shè)置屬性不添加默認(rèn)值時可用數(shù)組形式 props: ['compProp'],
//設(shè)置默認(rèn)值時用對象形式
props: {
"compProp": {
default: '默認(rèn)值',
},
},
}
<!-- comp1.hml -->
<div class="container">
<text class="title">
{{compProp}}
</text>
</div>
- 自定義組件通過element引入到宿主頁面。代碼中的name屬性指自定義組件名稱(非必填)，組件名稱對大小寫不敏感，默認(rèn)使用小寫。src屬性指自定義組件hml文件路徑(必填)，若沒有設(shè)置name屬性，則默認(rèn)使用hml文件名作為組件名。
<!-- index.hml -->
<element name="mycomp" src="../../comps/comp1/comp1.hml"></element>
<div class="container">
<mycomp comp-prop="子組件"></mycomp>
</div>
- 數(shù)據(jù)單向性:父子組件之間數(shù)據(jù)的傳遞是單向的，只能從父組件傳遞給子組件，并且子組件不能直接修改父組件傳遞下來的值，但是可以將props傳入的值用data接收后作為默認(rèn)值，再對data的值進(jìn)行修改。
<!-- 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 感知數(shù)據(jù)改變：
如果需要觀察組件中屬性變化，可以通過$watch方法增加屬性變化回調(diào)?？梢杂^察data和props中定義的屬性。
// comp1.js
export default {
props: {
compProp: {
default: '默認(rèn)',
},
},
onInit() {
//添加對屬性變化的監(jiān)聽，監(jiān)聽綁定的函數(shù)為自定義的onPropertyChange
this.$watch('compProp', 'onPropertyChange');
},
//定義一個監(jiān)聽屬性變化的函數(shù)回調(diào)
onPropertyChange(newV, oldV) {
console.info('compProp 屬性變化，新值為：' + newV + '，舊值為：' + oldV);
}
}
<!-- index.hml -->
<element name="mycomp" src="../../comps/comp1/comp1.hml"></element>
<div class="container">
<!-- 給自定義屬性綁定數(shù)據(jù)，通過修改綁定的數(shù)據(jù)觸發(fā)屬性變化的監(jiān)聽-->
<mycomp comp-prop="{{title}}"></mycomp>
<button onclick="change" style="height: 100;width: 30%;font-size: 30fp;">按鈕</button>
</div>
export default {
data: {
title: "子組件"
},
//改變子組件自定義屬性綁定的數(shù)據(jù)，從而觸發(fā)對屬性變化的監(jiān)聽
change(){
this.title = "鴻蒙";
}
}
computed 計算屬性：
自定義組件中在讀取或設(shè)置某個屬性時進(jìn)行預(yù)先處理時，就需要使用computed字段。computed字段中可通過設(shè)置屬性的getter和setter方法在屬性讀寫的時候進(jìn)行觸發(fā)。
在computed字段中定義一些函數(shù)，這些函數(shù)就叫做“計算屬性”。定義的時候雖然是函數(shù)樣式，但是在引用“計算屬性”的時候不要加()，就當(dāng)作普通屬性引用即可。
computed用來監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進(jìn)行數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理。
//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: '默認(rèn)',
},
},
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';
},
}
文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2295。
