縱橫千里獨(dú)行客，何懼前路雨瀟瀟。夜半濁酒慰寂寞，天明走馬入紅塵。且將新火試新茶，詩(shī)酒趁年華。青春以末，壯志照舊，生活以悟，前路未明。時(shí)間善變，可執(zhí)著翻不了篇。時(shí)光磨我少年心，卻難滅我少年志，壯士活古不活皮。加油。

程序員必備的面試技巧

目錄

一，定義

二，裝飾器使用規(guī)則說明

三，變量的傳遞/訪問規(guī)則說明

?四，使用

1，簡(jiǎn)單使用

2，裝飾復(fù)雜類型

3，@State和@Prop的同步場(chǎng)景

?4，父組件@State到子組件@Prop簡(jiǎn)單數(shù)據(jù)類型同步

5，父組件@State到子組件@Prop復(fù)雜數(shù)據(jù)類型同步

注意事項(xiàng)

一，定義

@Prop裝飾的變量可以和父組件建立單向的同步關(guān)系。@Prop裝飾的變量是可變的，但是變化不會(huì)同步回其父組件。

@Prop裝飾的變量和父組件建立單向的同步關(guān)系：

①@Prop變量允許在本地修改，但修改后的變化不會(huì)同步回父組件。

②當(dāng)數(shù)據(jù)源更改時(shí)，@Prop裝飾的變量都會(huì)更新，并且會(huì)覆蓋本地所有更改。因此，數(shù)值的同步是父組件到子組件（所屬組件)，子組件數(shù)值的變化不會(huì)同步到父組件。

！注意：

①@Prop修飾復(fù)雜類型時(shí)是深拷貝，在拷貝的過程中除了基本類型、Map、Set、Date、Array外，都會(huì)丟失類型。

②@Prop裝飾器不能在@Entry裝飾的自定義組件中使用。

二，裝飾器使用規(guī)則說明

?

三，變量的傳遞/訪問規(guī)則說明

?四，使用

1，簡(jiǎn)單使用

創(chuàng)建組件，只能在組件中使用

@Component
export default struct PropTest {
  @Prop yuanZhen:string ="222"

  build() {
    Row() {
      Column() {
        Text("name:" + this.yuanZhen)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuanZhen = "888"
          })
      }.width('100%')
    }.height('100%')
  }
}

引用組件：

import PropTest from './PropTest';

@Entry
@Component
struct Index {

  build() {
    Column(){
      PropTest()
    }
  }
}

運(yùn)行：

點(diǎn)擊

2，裝飾復(fù)雜類型

創(chuàng)建兩個(gè)類：

export default class YuanZhen {

  public name: string = 'YuanZhen';

  public age: number = 18;

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

import YuanZhen from './YuanZhen';

export default class Yuan {

  public number: number = 1;
  public yuanZhen: YuanZhen = new YuanZhen('yuanzhen', 18);

  constructor(number: number, yuanZhen: YuanZhen) {
    this.number = number
    this.yuanZhen = yuanZhen
  }
}

?在組件中應(yīng)用：

import Yuan from './bean/Yuan'

@Component
export default struct PropTest {
  @Prop yuanZhen:Yuan

  build() {
    Row() {
      Column() {
        Text("name:" + this.yuanZhen.yuanZhen.name+"\nage:"+this.yuanZhen.yuanZhen.age+"\nnumber:"+this.yuanZhen.number)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuanZhen.number=26
            this.yuanZhen.yuanZhen.age=30
            this.yuanZhen.yuanZhen.name="袁世震"
          })
      }.width('100%')
    }.height('100%')
  }
}

傳值給組件：

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import PropTest from './PropTest';

@Entry
@Component
struct Index {

  build() {
    Column(){
      PropTest({yuanZhen:new Yuan(1,new YuanZhen("袁震",22))})
    }
  }
}

結(jié)果：

點(diǎn)擊后

所以，當(dāng)裝飾的類型是Object或者class復(fù)雜類型時(shí)，可以觀察到所有的屬性的變化

?

3，@State和@Prop的同步場(chǎng)景

①使用父組件中@State變量的值初始化子組件中的@Prop變量。當(dāng)@State變量變化時(shí)，該變量值也會(huì)同步更新至@Prop變量。

②@Prop裝飾的變量的修改不會(huì)影響其數(shù)據(jù)源@State裝飾變量的值。

③除了@State，數(shù)據(jù)源也可以用@Link或@Prop裝飾，對(duì)@Prop的同步機(jī)制是相同的。

④數(shù)據(jù)源和@Prop變量的類型需要相同，@Prop允許簡(jiǎn)單類型和class類型。

！注意：

1. 初始渲染：

   1. 執(zhí)行父組件的build()函數(shù)將創(chuàng)建子組件的新實(shí)例，將數(shù)據(jù)源傳遞給子組件；
   2. 初始化子組件@Prop裝飾的變量。

2. 更新：

   1. 子組件@Prop更新時(shí)，更新僅停留在當(dāng)前子組件，不會(huì)同步回父組件；
   2. 當(dāng)父組件的數(shù)據(jù)源更新時(shí)，子組件的@Prop裝飾的變量將被來自父組件的數(shù)據(jù)源重置，所有@Prop裝飾的本地的修改將被父組件的更新覆蓋。

?4，父組件@State到子組件@Prop簡(jiǎn)單數(shù)據(jù)類型同步

在父組件定義一個(gè)變量a，并傳遞到子組件

import PropTest from './PropTest';

@Entry
@Component
struct Index {

  @State a:number=2

  build() {
    Column(){
      Text("a="+this.a)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
           this.a =66
        })
      PropTest({a:this.a})
    }
  }
}

@Component
export default struct PropTest {
  @Prop a:number

  build() {
    Row() {
      Column() {
        Text("a:" +this.a)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.a =888
          })
      }.width('100%')
    }.height('100%')
  }
}

運(yùn)行：

當(dāng)點(diǎn)擊上面的a=2時(shí)，運(yùn)行結(jié)果

當(dāng)點(diǎn)擊a:66時(shí)，運(yùn)行結(jié)果:

所以：當(dāng)父組件的數(shù)據(jù)源更新時(shí)，子組件的@Prop裝飾的變量將被來自父組件的數(shù)據(jù)源重置，所有@Prop裝飾的本地的修改將被父組件的更新覆蓋，當(dāng)子組件@Prop更新時(shí)，更新僅停留在當(dāng)前子組件，不會(huì)同步回父組件

5，父組件@State到子組件@Prop復(fù)雜數(shù)據(jù)類型同步

父組件：

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import PropTest from './PropTest';

@Entry
@Component
struct Index {

  @State yuan:Yuan=new Yuan(2,new YuanZhen("袁震",18))

  build() {
    Column(){
      Text("name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.yuan.number=1
          this.yuan.yuanZhen.age=32
          this.yuan.yuanZhen.name="袁震1"
        })
      PropTest({yuan:this.yuan})
    }
  }
}

子組件：

import Yuan from './bean/Yuan'

@Component
export default struct PropTest {
  @Prop yuan:Yuan


  build() {
    Row() {
      Column() {
        Text("name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuan.number=26
            this.yuan.yuanZhen.age=30
            this.yuan.yuanZhen.name="袁世震"
          })
      }.width('100%')
    }.height('100%')
  }
}

運(yùn)行：

點(diǎn)擊上面的text：

點(diǎn)擊下面的text：

注意事項(xiàng)

@Prop需要被初始化，如果沒有進(jìn)行本地初始化的，則必須通過父組件進(jìn)行初始化。如果進(jìn)行了本地初始化，那么是可以不通過父組件進(jìn)行初始化的。文章來源地址http://www.zghlxwxcb.cn/news/detail-788874.html

到了這里，關(guān)于鴻蒙Harmony--狀態(tài)管理器--@Prop詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！