Vue選項props

組件接受的選項大部分與Vue實例一樣，而選項props是組件中非常重要的一個選項。在 Vue 中，父子組件的關係可以總結為 props down,
events up。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。本文將詳細介紹Vue組件選項props

靜態props

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，需要通過子組件的 props
選項

使用Prop傳遞數據包括靜態和動態兩種形式，下面先介紹靜態props

子組件要顯式地用 props 選項聲明它期待獲得的數據

var childNode = {

靜態Prop通過為子組件在父組件中的佔位符添加特性的方式來達到傳值的目的

<div id="example">

<script>var childNode = {

命名約定

對於props聲明的屬性來說，在父級HTML模板中，屬性名需要使用中劃線寫法

var parentNode = {

子級props屬性聲明時，使用小駝峰或者中劃線寫法都可以；而子級模板使用從父級傳來的變數時，需要使用對應的小駝峰寫法

var childNode = {

var childNode = {

動態props

在模板中，要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用
v-bind。每當父組件的數據變化時，該變化也會傳導給子組件

var childNode = {

var parentNode = {

傳遞數字

初學者常犯的一個錯誤是使用字面量語法傳遞數值

<!-- 傳遞了一個字元串 "1" -->
<comp some-prop="1"></comp>

<div id="example">

<script>var childNode = {

因為它是一個字面 prop，它的值是字元串 "1" 而不是 number。如果想傳遞一個實際的 number，需要使用
v-bind，從而讓它的值被當作JS表達式計算

<!-- 傳遞實際的 number --><comp v-bind:some-prop="1"></comp>

var parentNode = {

或者可以使用動態props，在data屬性中設置對應的數字1

var parentNode = {

props驗證

可以為組件的 props 指定驗證規格。如果傳入的數據不符合規格，Vue會發出警告。當組件給其他人使用時，這很有用

要指定驗證規格，需要用對象的形式，而不能用字元串數組

Vue.component("example", {

type 可以是下面原生構造器

String

type 也可以是一個自定義構造器函數，使用 instanceof 檢測。

當 prop 驗證失敗，Vue 會在拋出警告 (如果使用的是開發版本)。props會在組件實例創建之前進行校驗，所以在 default 或
validator 函數里，諸如 data、computed 或 methods 等實例屬性還無法使用

下面是一個簡單例子，如果傳入子組件的message不是數字，則拋出警告

<div id="example">

<script>

傳入數字123時，則無警告提示。傳入字元串"123"時，結果如下所示

將上面代碼中，子組件的內容修改如下，可自定義驗證函數，當函數返回為false時，則輸出警告提示

var childNode = {

在父組件中傳入msg值為1，由於小於10，則輸出警告提示

var parentNode = {

單向數據流

prop
是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解

另外，每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著不應該在子組件內部改變 prop。如果這麼做了，Vue
會在控制台給出警告

下面是一個典型例子

<div id="example">

<script>

父組件數據變化時，子組件數據會相應變化；而子組件數據變化時，父組件數據不變，並在控制台顯示警告

修改prop中的數據，通常有以下兩種原因

1、prop 作為初始值傳入後，子組件想把它當作局部數據來用

2、prop 作為初始值傳入，由子組件處理成其它數據輸出

對於這兩種情況，正確的應對方式是

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

props: ["initialCounter"],

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

props: ["size"],

[注意]JS中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態

中公優就業IT培訓，總有你想學的：http://xue.ujiuye.com

勤工儉學計劃，0元學IT!

http://www.ujiuye.com/zt/qgjx/?wt.bd=mmxtt

找工作太難?好漢，讓我助你一臂之力!

http://www.ujiuye.com/zt/jyfc/?wt.bd=mmxtt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！