### 組件是什么 * 從JS的角度看，是組件類型， 是對象類的概念。 * 從HTML角度是自定義的標簽，類似`<table>`、`<br>` ### 組件定義語法 ``` Vue.component('my-component-name', { /* ... */ }) ``` * my-component-name 是定義的組件名 * 大括號是JS對象， 是定義組件的選項， 包括： 數據、方法等 ### 組件命名規范 字母全小寫，至少包含一個連字符（-）， 目的是避免和HTML的標簽元素沖突（tr, td , div .....）。 比如：my-component-name， 也有使用駝峰法命名的（比如：MyComponentName），但直接在DOM中使用不可以。 ### 組件注冊 全局注冊 vs 局部注冊 從面向對象角度來說，就是定義新的組件類型。 | | 全局注冊 | 局部注冊 | | --- | --- | --- | | 定義方式 | 通過Vue.component 創建 | 使用普通的JS對象定義| | 定義示例 | Vue.component('my-component-name', { /\* ... \*/ }) | var ComponentA = { /\* ... \*/ } | | 使用示例 | `new Vue({ el: '#app' } ` | `new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })` | | 區別 | 組件可以相互使用| 局部注冊組件在其子組件不可以 | | 優劣 | 定義使用方便 | 減少下載，優化性能 | | | | |