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 組件。

如果大家想對VUE.JS有更加深入系統的學習，可以參閱 Vue.js實戰 PDF高質量掃描版 這本經典讀物

靜態 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 的代碼，這次只需要改動父組件：