（1）組件名
在注冊一個組件的時候，我們始終需要給它一個名字。比如在全局注冊的時候我們已經看到了：
Vue.component('my-component-name', { /* ... */ })
該組件名就是 Vue.component 的第一個參數。你給予組件的名字可能依賴於你打算拿它來做什么。當直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候，強烈推薦遵循 W3C 規范中自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當前以及未來的 HTML 元素相沖突。可以在風格指南中查閱到關於組件名其它建議。
組件名大小寫：定義組件名的方式有兩種：
①kebab-case橫斷線分隔命名
Vue.component('my-component-name', { /* ... */ })
當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。
②PascalCase大駝峰命名
Vue.component('MyComponentName', { /* ... */ })
當使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。
（2）全局注冊
到目前為止，我們只用過 Vue.component 來創建組件：
Vue.component('my-component-name', { // ... 選項 ... })
這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中。比如：
Vue.component('component-a', { /* ... */ }) Vue.component('component-b', { /* ... */ }) Vue.component('component-c', { /* ... */ }) new Vue({ el: '#app' }) <div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c> </div>
在所有子組件中也是如此，也就是說這三個組件在各自內部也都可以相互使用。
（3）局部注冊（待驗證）
import Vue from 'vue'; import App from './App'; import router from './route'; import axios from 'axios'; import './less/index';
（4）模塊系統（待驗證）
（5）Prop
先來簡單回顧下組件
<div class="component_area"> <register-area v-for="info in infos" v-bind:info="info.name"></register-area> </div> <script type="text/javascript"> Vue.component('register-area',{ props:['info'], template:"<div>{{info}}</div>" }) new Vue({ el:".component_area", data:{ infos:[ {name:"展示信息1"}, {name:"展示信息2"}, {name:"展示信息3"} ] } }) </script>
結果：
①Prop 的大小寫 (camelCase vs kebab-case)
HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味着當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：
Vue.component('register-area',{ // 在 JavaScript 中是 camelCase 的 props:['infoArea'], template:"<div>{{infoArea}}</div>" }) new Vue({ el:".component_area", data:{ infos:[ {name:"展示信息1"}, {name:"展示信息2"}, {name:"展示信息3"} ] } })
<div class="component_area"> <!-- 在 HTML 中是 kebab-case 的 --> <register-area v-for="info in infos" v-bind:info-area="info.name"></register-area> </div>
注意：如果你使用字符串模板，那么這個限制就不存在了
②Prop類型
之前只看到了以字符串數組形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是，通常你希望每個 prop 都有指定的值類型。這時，你可以以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
這不僅為你的組件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的 JavaScript 控制台提示用戶。你會在這個頁面接下來的部分看到類型檢查和其它 prop 驗證。
③傳遞靜態或動態Prop
1、可以像這樣給 prop 傳入一個靜態的值：
<div class="prop_area"> <prop-dom info="我是標題信息1"></prop-dom> <prop-dom info="我是標題信息2"></prop-dom> </div> // 注冊vue組件 Vue.component('prop-dom',{ props:['info'], template:"<h1>{{info}}</h1>"
}) // 實例化，構建組件模板 new Vue({ el:".prop_area" })
結果：
2、 prop 可以通過 v-bind 動態賦值
<div class="component_area"> <!-- 在 HTML 中是 kebab-case 的 --> <register-area v-for="info in infos" v-bind:info-area="info.name"></register-area> </div> Vue.component('register-area',{ // 在 JavaScript 中是 camelCase 的 props:['infoArea'], template:"<div>{{infoArea}}</div>" }) new Vue({ el:".component_area", data:{ infos:[ {name:"展示信息1"}, {name:"展示信息2"}, {name:"展示信息3"} ] } });
案例2：
<!-- 動態賦予一個變量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 動態賦予一個復雜表達式的值 --> <blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>
在上述兩個示例中，我們傳入的值都是字符串類型的，但實際上任何類型的值都可以傳給一個 prop
{1}傳入一個數字
<!-- 即便 `42` 是靜態的，我們仍然需要 `v-bind` 來告訴 Vue --> <!-- 這是一個 JavaScript 表達式而不是一個字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一個變量進行動態賦值。--> <blog-post v-bind:likes="post.likes"></blog-post>
{2}傳入一個布爾值
<!-- 包含該 prop 沒有值的情況在內，都意味着 `true`。--> <blog-post is-published></blog-post> <!-- 即便 `false` 是靜態的，我們仍然需要 `v-bind` 來告訴 Vue --> <!-- 這是一個 JavaScript 表達式而不是一個字符串。--> <blog-post v-bind:is-published="false"></blog-post> <!-- 用一個變量進行動態賦值。--> <blog-post v-bind:is-published="post.isPublished"></blog-post>
{3}傳入一個數組
<!-- 即便數組是靜態的，我們仍然需要 `v-bind` 來告訴 Vue --> <!-- 這是一個 JavaScript 表達式而不是一個字符串。--> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- 用一個變量進行動態賦值。--> <blog-post v-bind:comment-ids="post.commentIds"></blog-post>
{4}傳入一個對象
<!-- 即便對象是靜態的，我們仍然需要 `v-bind` 來告訴 Vue --> <!-- 這是一個 JavaScript 表達式而不是一個字符串。--> <blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }" ></blog-post> <!-- 用一個變量進行動態賦值。--> <blog-post v-bind:author="post.author"></blog-post>
{5}傳入一個對象的所有屬性
首先回顧下組件，當組件變得越來越復雜的時候，我們的博文不只需要標題和內容，還需要發布日期、評論等等。為每個相關的信息定義一個 prop 會變得很麻煩：
<!-- 傳入一個對象的所有屬性 --> <div class="obj_prop"> <obj-prop v-for="blog in blogs" v-bind:name="blog.name" v-bind:content="blog.content" v-bind:author="blog.author" ></obj-prop> </div> Vue.component('obj-prop',{ props:['name','content','author'], template:'\ <div class="obj_prop_div"><h2>{{name}}</h2>\ <p>內容為：{{content}}</p>\ <p>作者為：{{author}}</p>\ </div>\ ' }); new Vue({ el:".obj_prop", data:{ blogs:[ {name:'HTML初始',content:'主要html標簽...',author:'Tony1'}, {name:'JS初始',content:'主要JS語法...',author:'Tony2'}, ] } })
結果：
是時候重構一下這個 <obj-prop> 組件了，讓它變成接受一個單獨的 obj prop：
<div class="obj_prop"> <obj-prop v-for="blog in blogs" v-bind:blog="blog" ></obj-prop> </div> Vue.component('obj-prop',{ props:['blog'], template:'\ <div class="obj_prop_div"><h2>{{blog.name}}</h2>\ <p>內容為：{{blog.content}}</p>\ <p>作者為：{{blog.author}}</p>\ </div>\ ' });
即：
v-bind:blog="blog"
等價於
v-bind:name="blog.name" v-bind:content="blog.content" v-bind:author="blog.author"
（6）單向數據流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。
<!-- 單向數據流 -->
<div class="data_flow">
<!-- 調用為父組件，父組件改變值時子組件通過props傳值也發生改動 -->
<data-flow data="單向數據，父級組件向子組件傳遞"></data-flow>
</div>
Vue.component('data-flow',{
// 定義時為子組件
props:['data'],
template:"<h1>{{data}}</h1>"
});
new Vue({
el:".data_flow"
});
結果：
注意：兩種常見的試圖改變一個 prop 的情形（待驗證）
1、這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值：
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
2、這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
注意在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。
（7）Prop驗證
我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制台中警告你。這在開發一個會被別人用到的組件時尤其有幫助。為了定制 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。例如：
Vue.component('my-component', { props: { // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證) 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 ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } })
demo：
<div class="data_flow"> <!-- 調用為父組件 --> <data-flow data="單向數據，父級組件向子組件傳遞"></data-flow> </div> Vue.component('data-flow',{ // 定義時為子組件 props:{data:Number}, template:"<h1>{{data}}</h1>" }); new Vue({ el:".data_flow" })
此時可以正常渲染
但是查看控制台會發現報錯警告
即當 prop 驗證失敗的時候，(開發環境構建版本-包含完整的警告和調試模式，而生產版本刪除了警告，33.30KB min+gzip) Vue 將會產生一個控制台的警告。
注意：那些 prop 會在一個組件實例創建之前進行驗證，所以實例的屬性 (如 data、computed 等) 在 default 或 validator 函數中是不可用的。
①類型驗證
type 可以是下列原生構造函數中的一個：
StringNumberBooleanArrayObjectDateFunctionSymbol
（8）非Prop特性（待驗證-了解即可）
.