Vue props用法詳解，父子元件傳值
元件接受的選項之一 props 是 Vue 中非常重要的一個選項。父子元件的關係可以總結為：
props down, events up
父元件通過 props 向下傳遞資料給子元件；子元件通過 events 給父元件傳送訊息。
父子級元件
比如我們需要建立兩個元件 parent 和 child。需要保證每個元件可以在相對隔離的環境中書寫，這樣也能提高元件的可維護性。
這裡我們先定義父子兩個元件和一個 Vue 物件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
|
1 2 3 |
|
這裡的 childNode 定義的 template 是一個 div，並且內容是"childNode"字串。
而在 parentNode 的 template 中定義了 div 的 class 名叫 parent 並且包含了兩個 child 元件。
靜態 props
元件例項的作用域是孤立的。這意味著不能（也不應該）在子元件的模板中直接飲用父元件的資料。要讓子元件使用父元件的資料，需要通過子元件的 props 選項。
父元件向子元件傳遞資料分為兩種方式：動態和靜態，這裡先介紹靜態方式。
子元件要顯示的用 props 宣告它期望獲得的資料
修改上例中的程式碼，給 childNode 新增一個 props 選項和需要的forChildMsg資料;
然後在父元件中的佔位符新增特性的方式來傳遞資料。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
命名規範
對於 props 宣告的屬性，在父元件的 template 模板中，屬性名需要使用中劃線寫法；
子元件 props 屬性宣告時，使用小駝峰或者中劃線寫法都可以；而子元件的模板使用從父元件傳來的變數時，需要使用對應的小駝峰寫法。別擔心，Vue 能夠正確識別出小駝峰和下劃線命名法混用的變數，如這裡的forChildMsg和for-child-msg是同一值。
動態 props
在模板中，要動態地繫結父元件的資料到子元件模板的 props，和繫結 Html 標籤特性一樣，使用v-bind繫結；
基於上述靜態 props 的程式碼，這次只需要改動父元件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
在父元件的 data 的 return 資料中的 childMsg1 和 childMsg2 會被傳入子元件中，
props 驗證
驗證傳入的 props 引數的資料規格，如果不符合資料規格，Vue 會發出警告。
能判斷的所有種類（也就是 type 值）有：String, Number, Boolean, Function, Object, Array, Symbol
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
|
還可以在 props 定義的資料中加入自定義驗證函式，當函式返回 false 時，輸出警告。
比如我們把上述例子中的 childNode 的for-child-msg修改成一個物件，幷包含一個名叫validator的函式，該命名是規定叫validator的，自定義函式名不會生效。
|
1 2 3 4 5 6 7 8 9 10 |
|
在這裡我們給for-child-msg變數設定了validator函式，並且要求傳入的值必須大於 100，否則報出警告。
單向資料流
props 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件五一修改父元件的狀態。
所以不應該在子元件中修改 props 中的值，Vue 會報出警告。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
這裡我們給父元件和子元件都有一個輸入框，並且顯示出父元件資料和子元件的資料。當我們在父元件的輸入框輸入新資料時，同步的子元件資料也被修改了；這就是 props 的向子元件傳遞資料。而當我們修改子元件的輸入框時，瀏覽器的控制檯則報出錯誤警告
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "forChildMsg"
修改 props 資料
通常有兩種原因：
- prop 作為初始值傳入後，子元件想把它當做區域性資料來用
- prop 作為初始值傳入後，由子元件處理成其他資料輸出
應對辦法是
定義一個區域性變數，並用 prop 的值初始化它
但是由於定義的 ownChildMsg 只能接受 forChildMsg 的初始值，當父元件要傳遞的值變化發生時，ownChildMsg 無法收到更新。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
這裡我們加了一個<p>用於檢視 ownChildMsg 資料是否變化，結果發現只有預設值傳遞給了 ownChildMsg，父元件改變只會變化到 forChildMsg，不會修改 ownChildMsg。
定義一個計算屬性，處理 prop 的值並返回
由於是計算屬性，所以只能顯示值，不能設定值。我們這裡設定的是一旦從父元件修改了 forChildMsg 資料，我們就把 forChildMsg 加上一個字串"---ownChildMsg"，然後顯示在螢幕上。這時是可以每當父元件修改了新資料，都會更新 ownChildMsg 資料的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
更加妥帖的方式是使用變數儲存 prop 的初始值，並用 watch 來觀察 prop 值得變化。發生變化時，更新變數的值。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援指令碼之家。