組件是Vue最強大的功能之一；組件化編程，允許我們使用小型，獨立，通用的可復用型組件構建大型應用；任何頁面都可以抽象為組件樹；
<!--
組件需要注冊后才能使用。
注冊有全局注冊和局部注冊兩種方式
全局注冊：
全局:
局部注冊：
局部: 注冊后的組件只是在該作用域下有效
父組件正向的向子組件傳遞數據和參數 用 props
props的值 可以是兩種
1，字符串數組 props:['message']
2，對象 props: {}
props中的數據來自父元素。data中的數據來自組件自己的數據。
兩種數據都可以在computed,methods,template中使用
單項數據流
父組件將改變后的數據傳遞給子組件，反過來是不行的。
業務中需要改變props的情況
1，父組件傳遞初始值進來，子組件將他作為初始值保存起來，
在自己的作用域下面隨意修改和使用。
props:['msg'],
data() {
return {
message: this.msg;
}
}
2，props作為需要被改變的原始值傳入可以使用計算屬性
props:['msg'],
computed: {
message() {
return this.msg;
}
}
由於HTML 不區分大小寫，當使用DOM模板時候。駱峰命名的props的名稱
轉為短橫線分隔符
showText ==> show-text
當DOM作為模板時會受到HTML的一些限制，
因為Vue瀏覽器解析和標准化HTML后才能獲取模板內容
以下來源不會受限制：
1，<script type="text/x-template">
2, JS 內聯模板字符串
3， .vue組件
如果限制了：方案使用is
<table>
<my-component></my-component>
</table>
<table>
<tr is="myComponent"></tr>
</table>
-->
props數據驗證
//
/**
* 數據驗證的type類型可以是
* String,
* Number,
* Boolean,
* Object,
* Array,
* Function
* type也可以是一個自定義的構造器，使用instanceof 檢測
*
* 當prop驗證失敗的時候，在開發版本下會在控制台拋出一條警告
*
*/
props: {
//數據驗證
name:
String,
//字符串類型
age: [
String,
Number],
// 必須是字符串或者數組類型
propB: {
// 布爾值 如果沒定義，默認是true
type:
Boolean,
default:
true
},
propC: {
//數組而且是必傳
type:
Number,
required:
true
},
propD: {
//如果是數組或者對象，默認值必須是一個函數來返回
type:
Array,
default
:
function() {
return [];
}
},
propF: {
// 自定義一個驗證函數
validator
:
function(
value) {
return
value >
10;
}
}
},