Vue中Props的作用有哪些

本篇文章給大家分享的是有關Vue中Props的作用有哪些，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

單向數據流

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

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

問題

下面簡要說一下上面發生的警告現象,或許大多數人都遇到過.

使用場景

父組件

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

• BackLogModal為一個彈窗組件,通過isModalOpen決定彈窗的開閉狀態
  

• 傳入的isModalOpen是父組件的一個變量,類型為boolean
  

• closeModal監聽子組件派發的自定義事件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屬性是單向數據流,具有不可變狀態,這是頁面就會拋出警告

解決問題

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

• 定義一個子組件私有變量isOpen與頁面彈窗就行綁定

• 使用@Watch('isModalOpen')監聽父組件傳入的isModalOpen屬性,一旦值發生改變,便更新本地變量isOpen,確保彈窗的正常的打開與關閉

以上就是Vue中Props的作用有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。