Vue中的Props(不可變狀態(tài))

更新時間：2018年09月29日 09:54:40 作者：roamingcode

這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

組件接受的選項大部分與Vue實例一樣，而選項props是組件中非常重要的一個選項。在 Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。接下來通過本文給大家介紹Vue中Props，一起看看吧！

單向數(shù)據(jù)流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)，從而導致你的應用的數(shù)據(jù)流向難以理解。

額外的，每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

問題

下面簡要說一下上面發(fā)生的警告現(xiàn)象,或許大多數(shù)人都遇到過.

使用場景

父組件

<BackLogModal :isModalOpen="isModalOpen" @closeModal="handleCloseModal">
</BackLogModal>

BackLogModal為一個彈窗組件,通過isModalOpen決定彈窗的開閉狀態(tài)
傳入的isModalOpen是父組件的一個變量,類型為boolean
closeModal監(jiān)聽子組件派發(fā)的自定義事件closeModal

子組件

// 使用了typescript
export default class BackLogModal extends Vue {
  @Prop()
  private isModalOpen: boolean;

  private handleConfirm(): void {
    this.$Message.info('Clicked ok');
    this.$emit('closeModal');
  }

  private handleClose(): void {
    this.$Message.info('Clicked cancal');
    this.$emit('closeModal');
  }
}

通過@Prop()注解獲取父組件傳遞過來的isModalOpen屬性
頁面通過v-model與屬性isModalOpen進行綁定
由于彈窗組件在關閉時會自動設置isModalOpen的值為false,這里直接修改的就是父組件傳入的isModalOpen屬性,由于props屬性是單向數(shù)據(jù)流,具有不可變狀態(tài),這是頁面就會拋出警告

解決問題

export default class BackLogModal extends Vue {
  private isOpen: boolean = false;

  @Prop()
  private isModalOpen: boolean;

  @Watch('isModalOpen')
  private watchModalOpen(newVal: boolean, oldVal: boolean) {
    console.log(newVal, oldVal);
    if (newVal !== oldVal) {
      this.isOpen = newVal;
    }
  }

  private handleConfirm(): void {
    this.$Message.info('Clicked ok');
    this.$emit('closeModal');
  }

  private handleClose(): void {
    this.$Message.info('Clicked cancal');
    this.$emit('closeModal');
  }
}