快捷導(dǎo)航

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

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

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

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

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

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

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

問題

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

使用場景

父組件

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

BackLogModal為一個(gè)彈窗組件,通過isModalOpen決定彈窗的開閉狀態(tài)
傳入的isModalOpen是父組件的一個(gè)變量,類型為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進(jìn)行綁定
由于彈窗組件在關(guān)閉時(shí)會(huì)自動(dòng)設(shè)置isModalOpen的值為false,這里直接修改的就是父組件傳入的isModalOpen屬性,由于props屬性是單向數(shù)據(jù)流,具有不可變狀態(tài),這是頁面就會(huì)拋出警告

解決問題

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');
  }
}