vue列印props的值 vue props 傳值

一、子元件需要做的

子元件要顯式地用 props 選項宣告它期待獲得的資料

props:[data]

然後在元件內使用data

二、父元件需要做的

這個時候需要區分靜態傳值和靜態傳值

靜態在父元件使用子元件標籤時

這個時候靜態傳值就完成了

動態在父元件使用子元件標籤時

data()}

注：在傳遞數字的時候盡量使用靜態傳值

三、props驗證

有時候我們需要對傳遞過來的值進行驗證，以確定傳遞的值符合我們的要求

要指定驗證規格，需要用物件的形式，而不能用字串陣列這時的props需要寫成物件

props:

注：　當 prop 驗證失敗，vue 會在丟擲警告 (如果使用的是開發版本)。props會在元件例項建立之前進行校驗，所以在 default 或 validator 函式裡，諸如 data、computed 或 methods 等例項屬性還無法使用；

四、單向資料流

props傳值是單向的：父元件的資料可以傳給子元件，而子元件的資料不能傳給父元件，這是為了防止子元件無意修改了父元件的狀態，每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著不應該在子元件內部改變 prop。如果這麼做了，vue 會在控制台給出警告

五、修改props資料

通常改變props的資料有兩個原因

1、prop 作為初始值傳入後，子元件想把它當作區域性資料來用

2、prop 作為初始值傳入，由子元件處理成其它資料輸出

注：js中物件和陣列是引用型別，指向同乙個記憶體空間，如果 prop 是乙個物件或陣列，在子元件內部改變它會影響父元件的狀態

因此接下來：

1、定義乙個區域性變數，並用 prop 的值初始化它

props: ['initialcounter'], data: function () }

但是，定義的區域性變數counter只能接受initialcounter的初始值，當父元件要傳遞的值發生變化時，counter無法接收到最新值

2、定義乙個計算屬性，處理 prop 的值並返回

props: ['size'], computed: }

但是，由於是計算屬性，則只能顯示值，而不能設定值

3、更好的方式，使用變數儲存prop的初始值，並使用watch來觀察prop的值的變化。發生變化時，更新變數的值

props:['childmsg'], data() }, watch: }