Props自定義屬性—學(xué)習(xí)筆記

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

本文主要內(nèi)容是關(guān)于JS自定義組件中的Props屬性。

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

前言

新的學(xué)期又開始啦！這學(xué)期筆者繼續(xù)學(xué)習(xí)鴻蒙開發(fā)的相關(guān)課程，同時(shí)也記錄一下自己的學(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ù)時(shí)需要使用 kebab-case (短橫線分隔命名) 形式，比如自定義的屬性名稱為compProp，在父組件引用時(shí)需要轉(zhuǎn)換為comp-prop。（駝峰命名法理解：第一個(gè)單詞以小寫字母開始；從第二個(gè)單詞開始以后的每個(gè)單詞的首字母都采用大寫字母，每一個(gè)邏輯斷點(diǎn)有一個(gè)大寫字母來標(biāo)記）
添加默認(rèn)值:子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。此情況下props屬性必須為對象形式，不能用數(shù)組形式。

// comp1.js 
export default { 
 //僅設(shè)置屬性不添加默認(rèn)值時(shí)可用數(shù)組形式  props: ['compProp'],
 //設(shè)置默認(rèn)值時(shí)用對象形式
    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)行修改。

【木棉花】：Props自定義屬性——學(xué)習(xí)筆記-開源基礎(chǔ)軟件社區(qū)

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

【木棉花】：Props自定義屬性——學(xué)習(xí)筆記-開源基礎(chǔ)軟件社區(qū)

// comp1.js
export default {
    props: {
        compProp: {
            default: '默認(rèn)',
        },
    },
    onInit() {
        //添加對屬性變化的監(jiān)聽，監(jiān)聽綁定的函數(shù)為自定義的onPropertyChange
        this.$watch('compProp', 'onPropertyChange');
    },
    //定義一個(gè)監(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 計(jì)算屬性：

自定義組件中在讀取或設(shè)置某個(gè)屬性時(shí)進(jìn)行預(yù)先處理時(shí)，就需要使用computed字段。computed字段中可通過設(shè)置屬性的getter和setter方法在屬性讀寫的時(shí)候進(jìn)行觸發(fā)。

在computed字段中定義一些函數(shù)，這些函數(shù)就叫做“計(jì)算屬性”。定義的時(shí)候雖然是函數(shù)樣式，但是在引用“計(jì)算屬性”的時(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';
    },
}