vue單向資料流prop
阿新 • • 發佈:2019-02-11
prop是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是反過來不會。這是為了防止子元件無意間修改了父元件的狀態,來避免應用的資料流變得難以理解。
另外,每次父元件更新時,子元件的所有prop都會更新為最新值。這意味著你不應該在子元件內部改變prop。如果你這麼做了,Vue會再控制檯給出警告。
在兩種情況下,我們很容易忍不住想要去修改prop中資料:
1、Prop作為初始值傳入後,子元件想把它當作區域性資料來用;
2、Prop作為原始資料傳入,由子元件處理成其它資料輸出。
對這兩種情況,正確的應對方式是:
1、定義一個區域性變數,並用prop的值初始化它:
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
2、定義一個計算屬性,處理prop的值並返回:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
【注意】在JavaScript中物件和陣列是引用型別,指向同一個記憶體空間,如果prop是一個物件或陣列,在子元件內部改變它會影響父元件的狀態