父組件向子組件傳值：父組件通過屬性向下傳值的方式和子組件通信；
使用步驟：
定義組件：現有自定義組件com-a、com-b，com-a是com-b的父組件；
准備獲取數據：com-b要獲取父組件data中的name屬性；
在<com-b :name=“name”></com-b> 使用v-bind 綁定name屬性，紅色部分為屬性名稱，可以隨意寫。
在子組件定義部分里添加選項，值是個字符串數組 props:[‘name’]，將上邊紅色的屬性名稱寫在這里；
之后就可定義在子組件中使用name屬性了；
現在就來解決上一篇博文提出的問題吧，讓父組件與子組件進行通信：
vue代碼：
<template id="father-template"> <div> <h2> 父組件</h2> username:<span>{{name}}</span> <hr /> <child-component :name="name"></child-component> </div> </template> <template id="child-template"> <div> <p> 子組件</p> fatherData:<span >{{name}}</span> </div> </template> <script> new Vue({ components:{ "father-component":{ data(){ return{ name:'perfect' } }, template:'#father-template', components:{ "child-component":{ template:'#child-template', props:['name'] } }, } } }).$mount('div'); </script>
由圖可知子組件已經可以和父組件進行通信了，因為共用了屬性name
現在我們就來測試一下調用父組件的多個屬性，以及對屬性值的綁定，可以進行觀測數據的變化
該效果圖的vue代碼：
<template id="father-template"> <div> <h2> 父組件</h2> myData:<span>{{name}},{{id}},{{user.username}}</span><br /> fatherData:<span>{{msg}}</span><br /> <input type="text" v-model="name"/> <hr /> <child-component :name="name" :id='id' :user='user'></child-component> </div> </template> <template id="child-template"> <div> <p> 子組件</p> fatherData:<span >{{name}},{{id}},{{user.username}}</span> </div> </template> <script> new Vue({ data:{ msg:"歡迎來到perfect*的博客園!!!" }, components:{ "father-component":{ data(){ return{ id:1, name:'perfect', user:{ username:'博客園---perfect*', password:'123123' } } }, props:['msg'], template:'#father-template', components:{ "child-component":{ template:'#child-template', props:['name','id','user'] } }, } } }).$mount('div'); </script>
html:
<div>
<father-component :msg="msg"></father-component>
</div>
father-component的父組件是body,由於屬性msg是全局的，所以需要使用的時候，需要進行綁定
props選項高級配置
詳細介紹prop網址：https://cn.vuejs.org/v2/guide/components-props.html
在上面的props的使用是字符串數組
props:['name','id','user']
props 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。
對象的形式：
props:{
name:String,
id:Number,
user:Object
}
components:{ "father-component":{ data(){ return{ id:"01", name:'perfect', user:{ username:'博客園---perfect*', password:'123123' } } },
結果雖然顯示出來了，但是控制台報錯誤了，錯誤顯示，id的類型檢測錯誤，它是number類型，不是一個字符串類型
解決方法：
props:{
name:String,
id:[Number,String],
user:Object
}
在props中每一個屬性都可以定義成對象的類型：
props:{ name:{ type:String, required:true//必須進行傳值 }, id:[Number,String], user:Object } }
當把組件中的name刪除時，會出現下面這樣的錯誤：
<child-component :id='id' :user='user'></child-component>
解決方法：我們可以通過在name對象中定義一個屬性default
props:{ name:{ type:String, //required:true,//必須進行傳值 default:'perfect*'//定義一個默認值 }, id:[Number,String], user:Object } } },
這樣控制台就沒有錯誤了
接下來為user對象設置一個默認值
<child-component :id='id' ></child-component>
props:{ name:{ type:String, //required:true,//必須進行傳值 default:'perfect*'//定義一個默認值 }, id:[Number,String], user:{ type:Object, default:function(){ return {username:'perfect***',password:'123123'} } } } } },
數據校驗
當定義一個屬性age:18時，初始效果
校驗demo:
props:{ name:{ type:String, //required:true,//必須進行傳值 default:'perfect*'//定義一個默認值 }, id:[Number,String], user:{ type:Object, default:function(){ return {username:'perfect***',password:'123123'} } }, age:{ type:Number, validator: function (value) { return value>=0; } } } } },
<child-component :id='id' :age='age'></child-component>
當age=-18時：
會進行自動校驗，見控制台：
