組件的註冊
在 `vue` 中，我們可以通過 `new Vue` 來創建一個組件，不過通常它是作爲整個應用的頂層根組件存在的，我們還可以通過另外的方式
來註冊一個更爲通用的組件
Vue.component()
組件名稱遵循自定義組件命名規範：全小寫、連字符（雖然駝峯式一般也沒問題）
組件選項與 `new Vue` 選項配置基本一致（也有一些細節的不同）
全局組件與局部組件
全局組件
通過 `Vue.component` 註冊的組件，我們稱爲全局組件，因爲它可以在任意範圍內使用
局部組件
在一個組件內部通過 `components` 選項註冊的組件是局部組件，只能在當前 `components` 選項所在的組件內部使用
注意：局部註冊的組件只能中當前註冊的組件中使用，不能在它的子組件中使用
data
在非 `new Vue` 的組件中，`data` 必須爲函數，函數返回值必須是一個對象，作爲組件的最終 `data`，這樣複用不會修改別人的數據
props
組件中內部私有數據存儲中組件 `data` 中，通過外部傳入的數據，則通過 `props` 選項接收
計算兩個圓的面積
組件通信
注意：不要修改 `props` 傳入的數據
父組件通過 `props` 傳入數據到子組件內部，但是子組件內部不要修改外部傳入的 `props`，`vue` 提供了一種事件機制通知父級
更新，父級中使用子組件的時候監聽對應的事件綁定對應的處理函數即可
父子組件通信
$emit()
`vue` 爲每個組件對象提供了一個內置方法 `$emit` ，它等同於自定義事件中的 `new Event`,`trigger` 等
事件數據就是中觸發事件的同時攜帶傳遞的數據 - `event`
- 父級在使用該組件的過程中，可以通過 `@事件名稱` 來註冊綁定事件函數
- 事件函數的第一個參數就是事件數據
組件雙綁的實現
雖然並不推薦在組件內部修改 `props` ，但是，有的時候確實希望組件內部狀態變化的時候改變 `props` ，我們可以通過子組件觸發
事件，父級監聽事件來達到這個目的，不過過程會比較繁瑣，`vue` 提供了一些操作來簡化這個過程
v-model（不建議用，因爲調試起來非常麻煩，很難找到問題點，推薦使用sync，效果一樣）
`v-model` 是 `vue` 提供的一個用於實現數據雙向綁定的指令，用來簡化 `props 到 data`，`data 到 props` 的操作流程
model 選項
`prop` 指定要綁定的屬性，默認是 `value`
`event` 指定要綁定觸發的事件，默認是 `input` 事件
案例2：
.sync
通過 `v-model` 來進行雙向綁定，會給狀態維護帶來一定的問題，因爲修改比較隱蔽，同時只能處理一個 `prop` 的綁定，我們還可以
通過另外一種方式來達到這個目的
update:[prop]
這裏事件名稱要使用 `update` 加上 `prop` 名稱 的格式
案例2：
插槽slot
默認情況下，組件模板解析後會替換整個組件內容，如果我們想在組件引用被包含的內容，可以通過 `vue` 提供的內置組件 `slot` 來獲取
具名插槽
v-slot
使用內置組件 `template` 與 `v-slot` 指令進行配置，用來命名插槽，在組件模板中，通過 `<slot name="插槽名字">` 來使用
作用域插槽（帶數據的插槽）
組件內部與組件包含的內容屬於不同的作用域（被包含的內容是組件父級下的作用域）
props 驗證
組件的 `props` 就是組件的參數，爲了確保傳入的數據在可控的合理範圍內，我們需要對傳入的 `props` 的值類型進行必要的驗證
非 prop 特性
一個非 `prop` 特性是指傳向一個組件，但是該組件並沒有相應 `prop` 定義的特性，這些 `props` 會被自動添加到組件的根元素上
替換/合併已有的特性
默認情況下，非`prop` 特性的屬性會覆蓋組件根元素上同名的內容，但是針對 `style` 和 `class` 有特殊的處理，它們會合並（同名樣式
還是會覆蓋）
禁用特性繼承
如果你不希望組件的根元素繼承特性，你可以在組件的選項中設置 `inheritAttrs: false`，我們可以通過組件的 `this.$attrs` 來獲取這些屬性
注意 `inheritAttrs: false` 選項**不會**影響 `style` 和 `class` 的綁定
