Props自定義屬性—學習筆記

作者：木棉花潘穎琳 2022-09-21 14:42:03

系統 OpenHarmony

本文主要內容是關于JS自定義組件中的Props屬性。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

前言

新的學期又開始啦！這學期筆者繼續學習鴻蒙開發的相關課程，同時也記錄一下自己的學習筆記，養成良好習慣??好好學習，天天向上?。?/p>

概述

本文主要內容是關于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的值進行修改。

【木棉花】：Props自定義屬性——學習筆記-開源基礎軟件社區

<!-- 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中定義的屬性。

【木棉花】：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';
    },
}