Vue props用法詳解

Vue props用法詳解

組件接受的選項之一 props 是 Vue 中很是重要的一個選項。父子組件的關係能夠總結爲：

props down, events up

父組件經過 props 向下傳遞數據給子組件；子組件經過 events 給父組件發送消息。

父子級組件

好比咱們須要建立兩個組件 parent 和 child。須要保證每一個組件能夠在相對隔離的環境中書寫，這樣也能提升組件的可維護性。

這裏咱們先定義父子兩個組件和一個 Vue 對象：

var childNode = {
  template: `
        <div>childNode</div> ` }; var parentNode = { template: ` <div> <child></child> <child></child> </div> `, components: { child: childNode } }; new Vue({ el: "#example", components: { parent: parentNode } }); 

<div id="example"> <parent></parent> </div> 

這裏的 childNode 定義的 template 是一個 div，而且內容是"childNode"字符串。
而在 parentNode 的 template 中定義了 div 的 class 名叫 parent 而且包含了兩個 child 組件。

靜態 props

組件實例的做用域是孤立的。這意味着不能（也不該該）在子組件的模板中直接飲用父組件的數據。要讓子組件使用父組件的數據，須要經過子組件的 props 選項。

父組件向子組件傳遞數據分爲兩種方式：動態和靜態，這裏先介紹靜態方式。

子組件要顯示的用 props 聲明它指望得到的數據

修改上例中的代碼，給 childNode 添加一個 props 選項和須要的forChildMsg數據;
而後在父組件中的佔位符添加特性的方式來傳遞數據。

var childNode = {
  template: `
        <div> {{forChildMsg}} </div> `, props: ["for-child-msg"] }; var parentNode = { template: ` <div> <p>parentNode</p> <child for-child-msg="aaa"></child> <child for-child-msg="bbb"></child> </div> `, components: { child: childNode } }; 

命名規範
對於 props 聲明的屬性，在父組件的 template 模板中，屬性名須要使用中劃線寫法；

子組件 props 屬性聲明時，使用小駝峯或者中劃線寫法均可以；而子組件的模板使用從父組件傳來的變量時，須要使用對應的小駝峯寫法。別擔憂，Vue 可以正確識別出小駝峯和下劃線命名法混用的變量，如這裏的forChildMsg和for-child-msg是同一值。

動態 props

在模板中，要動態地綁定父組件的數據到子組件模板的 props，和綁定 Html 標籤特性同樣，使用v-bind綁定；

基於上述靜態 props 的代碼，此次只須要改動父組件：

var parentNode = { template: ` <div> <p>parentNode</p> <child :for-child-msg="childMsg1"></child> <child :for-child-msg="childMsg2"></child> </div> `, components: { child: childNode }, data: function() { return { childMsg1: "Dynamic props msg for child-1", childMsg2: "Dynamic props msg for child-2" }; } }; 

在父組件的 data 的 return 數據中的 childMsg1 和 childMsg2 會被傳入子組件中，

props 驗證

驗證傳入的 props 參數的數據規格，若是不符合數據規格，Vue 會發出警告。

能判斷的全部種類（也就是 type 值）有：
String, Number, Boolean, Function, Object, Array, Symbol

Vue.component("example", { props: { // 基礎類型檢測, null意味着任何類型都行 propA: Number, // 多種類型 propB: [String, Number], // 必傳且是String propC: { type: String, required: true }, // 數字有默認值 propD: { type: Number, default: 101 }, // 數組、默認值是一個工廠函數返回對象 propE: { type: Object, default: function() { console.log("propE default invoked."); return { message: "I am from propE." }; } }, // 自定義驗證函數 propF: { isValid: function(value) { return value > 100; } } } }); let childNode = { template: "<div>{{forChildMsg}}</div>", props: { "for-child-msg": Number } }; let parentNode = { template: ` <div class="parent"> <child :for-child-msg="msg"></child> </div> `, components: { child: childNode }, data() { return { // 當這裏是字符串 "123456"時會報錯 msg: 123456 }; } }; 

還能夠在 props 定義的數據中加入自定義驗證函數，當函數返回 false 時，輸出警告。

好比咱們把上述例子中的 childNode 的for-child-msg修改爲一個對象，幷包含一個名叫validator的函數，該命名是規定叫validator的，自定義函數名不會生效。

let childNode = { template: "<div>{{forChildMsg}}</div>", props: { "for-child-msg": { validator: function(value) { return value > 100; } } } }; 

在這裏咱們給for-child-msg變量設置了validator函數，而且要求傳入的值必須大於 100，不然報出警告。

單向數據流

props 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。這是爲了防止子組件五一修改父組件的狀態。

因此不該該在子組件中修改 props 中的值，Vue 會報出警告。

let childNode = {
  template: `
          <div class="child"> <div> <span>子組件數據</span> <input v-model="forChildMsg"/> </div> <p>{{forChildMsg}}</p> </div>`, props: { "for-child-msg": String } }; let parentNode = { template: ` <div class="parent"> <div> <span>父組件數據</span> <input v-model="msg"/> </div> <p>{{msg}}</p> <child :for-child-msg="msg"></child> </div> `, components: { child: childNode }, data() { return { msg: "default string." }; } }; 

這裏咱們給父組件和子組件都有一個輸入框，而且顯示出父組件數據和子組件的數據。當咱們在父組件的輸入框輸入新數據時，同步的子組件數據也被修改了；這就是 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 數據

一般有兩種緣由：

1. prop 做爲初始值傳入後，子組件想把它當作局部數據來用
2. prop 做爲初始值傳入後，由子組件處理成其餘數據輸出

應對辦法是

1. 定義一個局部變量，並用 prop 的值初始化它

可是因爲定義的 ownChildMsg 只能接受 forChildMsg 的初始值，當父組件要傳遞的值變化發生時，ownChildMsg 沒法收到更新。

let childNode = {
  template: `
          <div class="child"> <div> <span>子組件數據</span> <input v-model="forChildMsg"/> </div> <p>{{forChildMsg}}</p> <p>ownChildMsg : {{ownChildMsg}}</p> </div>`, props: { "for-child-msg": String }, data() { return { ownChildMsg: this.forChildMsg }; } }; 

這裏咱們加了一個<p>用於查看 ownChildMsg 數據是否變化，結果發現只有默認值傳遞給了 ownChildMsg，父組件改變只會變化到 forChildMsg，不會修改 ownChildMsg。

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

因爲是計算屬性，因此只能顯示值，不能設置值。咱們這裏設置的是一旦從父組件修改了 forChildMsg 數據，咱們就把 forChildMsg 加上一個字符串"---ownChildMsg"，而後顯示在屏幕上。這時是能夠每當父組件修改了新數據，都會更新 ownChildMsg 數據的。

let childNode = {
  template: `
          <div class="child"> <div> <span>子組件數據</span> <input v-model="forChildMsg"/> </div> <p>{{forChildMsg}}</p> <p>ownChildMsg : {{ownChildMsg}}</p> </div>`, props: { "for-child-msg": String }, computed: { ownChildMsg() { return this.forChildMsg + "---ownChildMsg"; } } }; 

3. 更加妥帖的方式是使用變量存儲 prop 的初始值，並用 watch 來觀察 prop 值得變化。發生變化時，更新變量的值。

let childNode = {
  template: `
          <div class="child"> <div> <span>子組件數據</span> <input v-model="forChildMsg"/> </div> <p>{{forChildMsg}}</p> <p>ownChildMsg : {{ownChildMsg}}</p> </div>`, props: { "for-child-msg": String }, data() { return { ownChildMsg: this.forChildMsg }; }, watch: { forChildMsg() { this.ownChildMsg = this.forChildMsg; } } };