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
 }//前端全棧學習交流圈：866109386
};//幫助1-3Ian前端人員，突破技術瓶頸，提升思維能力
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 資料 通常有兩種原因：

• prop 作為初始值傳入後，子元件想把它當做區域性資料來用
• prop 作為初始值傳入後，由子元件處理成其他資料輸出 應對辦法是

定義一個區域性變數，並用 prop 的值初始化它 但是由於定義的 ownChildMsg 只能接受 forChildMsg 的初始值，當父元件要傳遞的值變化發生時，ownChildMsg 無法收到更新。

et 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。

定義一個計算屬性，處理 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";
  }
 }
};

更加妥帖的方式是使用變數儲存 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
  };//前端全棧學習交流圈：866109386
 },//幫助1-3年前端人員，突破技術瓶頸，提升思維能力
 watch: {
  forChildMsg() {
   this.ownChildMsg = this.forChildMsg;
  }
 }
};