前面的話
組件接受的選項大部分與Vue實例一樣，而選項props是組件中非常重要的一個選項。在 Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。本文將詳細介紹Vue組件選項props
靜態props
組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，需要通過子組件的 props 選項
使用Prop傳遞數據包括靜態和動態兩種形式，下面先介紹靜態props
子組件要顯式地用 props 選項聲明它期待獲得的數據
var childNode = { template: '<div>{{message}}</div>', props:['message']}靜態Prop通過為子組件在父組件中的占位符添加特性的方式來達到傳值的目的
<div id="example"> <parent></parent></div><script>var childNode = { template: '<div>{{message}}</div>', props:['message']}var parentNode = { template: ` <div class="parent"> <child message="aaa"></child> <child message="bbb"></child> </div>`, components: { 'child': childNode }};// 創建根實例new Vue({ el: '#example', components: { 'parent': parentNode }})</script>
命名約定
對于props聲明的屬性來說，在父級HTML模板中，屬性名需要使用中劃線寫法
var parentNode = { template: ` <div class="parent"> <child my-message="aaa"></child> <child my-message="bbb"></child> </div>`, components: { 'child': childNode }};子級props屬性聲明時，使用小駝峰或者中劃線寫法都可以；而子級模板使用從父級傳來的變量時，需要使用對應的小駝峰寫法
var childNode = { template: '<div>{{myMessage}}</div>', props:['myMessage']}var childNode = { template: '<div>{{myMessage}}</div>', props:['my-message']}動態props
在模板中，要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當父組件的數據變化時，該變化也會傳導給子組件
var childNode = { template: '<div>{{myMessage}}</div>', props:['myMessage']}var parentNode = { template: ` <div class="parent"> <child :my-message="data1"></child> <child :my-message="data2"></child> </div>`, components: { 'child': childNode }, data(){ return { 'data1':'aaa', 'data2':'bbb' } }};傳遞數字
初學者常犯的一個錯誤是使用字面量語法傳遞數值
<!-- 傳遞了一個字符串 "1" --><comp some-prop="1"></comp><div id="example"> <my-parent></my-parent></div><script>var childNode = { template: '<div>{{myMessage}}的類型是{{type}}</div>', props:['myMessage'], computed:{ type(){ return typeof this.myMessage } }}var parentNode = { template: ` <div class="parent"> <my-child my-message="1"></my-child> </div>`, components: { 'myChild': childNode }};// 創建根實例new Vue({ el: '#example', components: { 'MyParent': parentNode }})</script>
因為它是一個字面 prop，它的值是字符串 "1" 而不是 number。如果想傳遞一個實際的 number，需要使用 v-bind，從而讓它的值被當作JS表達式計算
<!-- 傳遞實際的 number --><comp v-bind:some-prop="1"></comp>var parentNode = { template: ` <div class="parent"> <my-child :my-message="1"></my-child> </div>`, components: { 'myChild': childNode }};
或者可以使用動態props，在data屬性中設置對應的數字1
var parentNode = { template: ` <div class="parent"> <my-child :my-message="data"></my-child> </div>`, components: { 'myChild': childNode }, data(){ return { 'data': 1 } }};props驗證
可以為組件的 props 指定驗證規格。如果傳入的數據不符合規格，Vue會發出警告。當組件給其他人使用時，這很有用
要指定驗證規格，需要用對象的形式，而不能用字符串數組
Vue.component('example', { props: { // 基礎類型檢測 (`null` 意思是任何類型都可以) propA: Number, // 多種類型 propB: [String, Number], // 必傳且是字符串 propC: { type: String, required: true }, // 數字，有默認值 propD: { type: Number, default: 100 }, // 數組/對象的默認值應當由一個工廠函數返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { return value > 10 } } }})type 可以是下面原生構造器
StringNumberBooleanFunctionObjectArraySymbol
type 也可以是一個自定義構造器函數，使用 instanceof 檢測。
當 prop 驗證失敗，Vue 會在拋出警告 (如果使用的是開發版本)。props會在組件實例創建之前進行校驗，所以在 default 或 validator 函數里，諸如 data、computed 或 methods 等實例屬性還無法使用
下面是一個簡單例子，如果傳入子組件的message不是數字，則拋出警告
<div id="example"> <parent></parent></div><script>var childNode = { template: '<div>{{message}}</div>', props:{ 'message':Number }}var parentNode = { template: ` <div class="parent"> <child :message="msg"></child> </div>`, components: { 'child': childNode }, data(){ return{ msg: '123' } }};// 創建根實例new Vue({ el: '#example', components: { 'parent': parentNode }})</script>傳入數字123時，則無警告提示。傳入字符串'123'時，結果如下所示
將上面代碼中，子組件的內容修改如下，可自定義驗證函數，當函數返回為false時，則輸出警告提示
var childNode = { template: '<div>{{message}}</div>', props:{ 'message':{ validator: function (value) { return value > 10 } } }}在父組件中傳入msg值為1，由于小于10，則輸出警告提示
var parentNode = { template: ` <div class="parent"> <child :message="msg"></child> </div>`, components: { 'child': childNode }, data(){ return{ msg:1 } }};
單向數據流
prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態――這會讓應用的數據流難以理解
另外，每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著不應該在子組件內部改變 prop。如果這么做了，Vue 會在控制臺給出警告
下面是一個典型例子
<div id="example"> <parent></parent></div><script>var childNode = { template: ` <div class="child"> <div> <span>子組件數據</span> <input v-model="childMsg"> </div> <p>{{childMsg}}</p> </div> `, props:['childMsg']}var parentNode = { template: ` <div class="parent"> <div> <span>父組件數據</span> <input v-model="msg"> </div> <p>{{msg}}</p> <child :child-msg="msg"></child> </div> `, components: { 'child': childNode }, data(){ return { 'msg':'match' } }};// 創建根實例new Vue({ el: '#example', components: { 'parent': parentNode }})</script>父組件數據變化時，子組件數據會相應變化；而子組件數據變化時，父組件數據不變，并在控制臺顯示警告
修改prop中的數據，通常有以下兩種原因
1、prop 作為初始值傳入后，子組件想把它當作局部數據來用
2、prop 作為初始值傳入，由子組件處理成其它數據輸出
對于這兩種情況，正確的應對方式是
1、定義一個局部變量，并用 prop 的值初始化它
props: ['initialCounter'],data: function () { return { counter: this.initialCounter }}2、定義一個計算屬性，處理 prop 的值并返回
props: ['size'],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}[注意]JS中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態
總結
以上所述是小編給大家介紹的Vue組件選項props實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
