什麼是Vue元件
元件可以擴充 HTML 元素，封裝可重用的代碼。在較高層面上，元件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，元件也可以是原生 HTML 元素的形式，以 is 特性擴充。
為什麼要封裝可複用的元件
Vue.js 的接口和文法十分自由，實作同一功能有若幹種方法。每個人解決問題的思路不一樣，寫出來的代碼也就不一樣，缺乏團隊内的規範。
元件，是一個具有一定功能，且不同元件間功能相對獨立的子產品。元件可以是一個按鈕、一個輸入框、一個視訊播放器等等。
可複用元件，高内聚、低耦合。
以原生元件vue為例，分析一下元件的構成
src="example.mp4"
width="320"
height="240"
οnlοad="loadHandler"
οnerrοr="errorHandler">
Your browser does not support the video tag.
執行個體中能看出，元件由狀态、事件和嵌套的片斷組成
狀态是元件目前的某些資料或屬性如video 中的 src、width 和 height
事件是元件在特定時機觸發一些操作的行為，如 video 在視訊資源加載成果或失敗時會觸發對應的事件來執行處理
片段指的是嵌套在元件标簽中的内容，該内容會在某些條件下展現出來，如在浏覽器不支援 video 标簽時顯示提示資訊
在 Vue 元件中，狀态稱為 props，事件稱為 events，片段稱為 slots。元件的構成部分也可以了解為元件對外的接口。良好的可複用元件應當定義一個清晰的公開接口。
Props 允許外部環境傳遞資料給元件
Events允許元件觸發外部環境的副作用
Slots 允許外部環境将額外的内容組合在元件中
使用 vue 對 video 元件做拓展，構造出一個支援播放清單的元件 myVideo：
:playlist="playlist"
width="320"
height="240"
@load="loadHandler"
@error="errorHandler"
@playnext="nextHandler"
@playprev="prevHandler">
myVideo 元件有着清晰的接口，接收播放清單、播放器寬高等狀态，能夠觸發加載成功或失敗、播放上一個或下一個的事件，并且能自定義播放結束時的尾頁，可用于插入廣告或顯示下一個視訊資訊。
元件間的通信
在 Vue.js 中，父子元件的關系可以總結為 props down, events up 。父元件通過 props 向下傳遞資料給子元件，子元件通過 events 給父元件發送消息。看看它們是怎麼工作的。
父子元件之間的通信
元件的職責
限制好元件的職責，能讓元件更好地解耦，知道什麼功能是元件實作的，什麼功能不需要實作。
元件可以分為通用元件(可複用元件)和業務元件(一次性元件)。
可複用元件實作通用的功能(不會因元件使用的位置、場景而變化)：
UI的展示
與使用者的互動(事件)
動畫效果
業務元件實作偏業務化的功能
擷取資料
和vuex相關的操作
埋點
引用可複用元件
可複用元件應盡量減少對外部條件的依賴，所有與 vuex 相關的操作都不應在可複用元件中出現。
元件應當避免對其父元件的依賴，不要通過 this.$parent 來操作父元件的示例。父元件也不要通過 this.$children 來引用子元件的示例，而是通過子元件的接口與之互動。