### 组件是什么 * 从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 } })` | | 区别 | 组件可以相互使用| 局部注册组件在其子组件不可以 | | 优劣 | 定义使用方便 | 减少下载，优化性能 | | | | |