組件實例的作用域是孤立的。這意味着不能(也不應該)在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的props選項。
prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態。
每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味着你不應該在子組件內部改變 prop。
1、Prop靜態傳遞數據
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 8 </head> 9 <body > 10 <div id="app"> 11 <!--靜態傳遞數據--> 12 <my-component message="hello" name="劉二狗" age="18"></my-component> 13 </div> 14 </body> 15 16 <script> 17 Vue.component('my-component',{ 18 //子組件使用父組件的數據 message name age 19 props:['message','name','age'], 20 //用data選項對數據進行處理 21 data:function(){ 22 return{ 23 message1: this.message +'用data選項對數據進行處理' 24 } 25 }, 26 //用計算屬性選項對數據進行處理 27 computed:{ 28 message2:function(){ 29 return this.message + '用計算屬性選項對數據進行處理' 30 } 31 }, 32 template:'<div>' + 33 '<span>{{message1}}</span><br>'+ 34 '<span>{{message2}}</span><br>'+ 35 '<span>{{message}} {{name}}今年{{age}}了</span><br>'+ 36 '</div>' 37 }) 38 new Vue({ 39 el:'#app' 40 }) 41 </script> 42 </html>
輸出結果：
2、Prop動態傳遞數據
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body > 9 <div id="app"> 10 <input v-model="parentMsg"><br> 11 <my-component :message="parentMsg"></my-component> 12 </div> 13 </body> 14 15 <script> 16 Vue.component('my-component',{ 17 props:['message'], 18 data:function(){ 19 return{count:this.message+'劉三狗的嫉妒了'} 20 }, 21 computed:{ 22 normalizedSize: function () { 23 return this.message.trim().toLowerCase() 24 } 25 }, 26 template:'<div>' + 27 '<span>{{message}}---{{normalizedSize}}</span><br>'+ 28 '<span>{{count}}</span>'+ 29 '</div>' 30 }) 31 32 new Vue({ 33 el:'#app', 34 data:{ 35 parentMsg:'哈哈哈' 36 } 37 }) 38 </script> 39 </html>
輸出結果：
3、Prop驗證，我們可以為組件的 props 指定驗證規格。如果傳入的數據不符合規格，Vue 會發出警告。在前台的控制器中可以看到警告信息。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <example :prop-d="message"></example> 11 </div> 12 </body> 13 14 <script> 15 Vue.component('example', { 16 props: { 17 // 基礎類型檢測 （`null` 意思是任何類型都可以） 18 propA: Number, 19 // 多種類型 20 propB: [String, Number], 21 // 必傳且是字符串 22 propC: { 23 type: String, 24 required: true 25 }, 26 // 數字，有默認值 27 propD: { 28 type: Number, 29 default: 100 30 }, 31 // 數組／對象的默認值應當由一個工廠函數返回 32 propE: { 33 type: Object, 34 default: function () { 35 return { message: 'hello' } 36 } 37 }, 38 // 自定義驗證函數 39 propF: { 40 validator: function (value) { 41 return value > 10 42 } 43 } 44 }, 45 template:'<span>{{propD}}</span>' 46 }) 47 48 new Vue({ 49 el:'#app', 50 data:{ 51 message:'propD驗證只能傳入數字類型' 52 } 53 }) 54 </script> 55 </html>
控制台輸出的警告信息：
