使用props
在Vue中父組件向子組件中傳送數據是通過props實現的，一個簡單的使用props的例子：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue Study</title></head><body> <div id="app"> <foo-component :foo-message="fooMessage"></foo-component> </div> <script type="text/javascript" src="lib/vue.js"></script><script type="text/javascript"> var fooComponent = { props: ['fooMessage'], template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: 123 } }); </script></body></html>為什么要有props驗證
但是上面這種方式是建立在大家都很遵守約定的情況下的，想象一下當有一個人要使用foo-component組件的時候，他可能對于其要接受的參數有什么要求并不是很清楚，因此傳入的參數可能會在開發子組件的人的意料之外，程序就會發生錯誤，就像我們在函數調用之前先檢查一下函數一樣，props也可以進行一個預先檢查。
平時調用函數的時候在函數開頭的地方都是一坨糊糊的參數檢查，這種寫法很不好了，所有后來就有了校驗器模式（別去百度了，我隨口取的名字），校驗器模式就是指把在函數開頭的對參數校驗的部分提取出來作為一個公共的部分來管理，讓一個什么東西來專門負責校驗，當類型不正確的時候就拋個異常根本不去調用這個函數，很多框架設計時都是這么設計的（Spring MVC、Struts2等等），props也提供了這個功能，想一下如果沒有這個功能的話，為了保證正確性我們可能需要在每次使用props屬性之前都寫一坨代碼來檢查。校驗器最大的好處就是大多數情況下我們只需要聲明我需要什么樣的數據，讓校驗器檢查好了再塞給我。
type
可以使用type來聲明這個參數可以接受的數據的類型，當檢查規則只有一個的時候type可以略寫：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue Study</title></head><body> <div id="app"> <foo-component :foo-message="fooMessage"></foo-component> </div> <script type="text/javascript" src="lib/vue.js"></script><script type="text/javascript"> var fooComponent = { props: { fooMessage: Number }, template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: 123 } }); </script></body></html>當傳入的參數類型不正確的時候Vue會發出提示：
新聞熱點
疑難解答
圖片精選
