vue组件开发

1. 组件开发介绍

• ① 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
  好处：便于维护，利于复用 → 提升开发效率。
  组件分类：普通组件、根组件。
• ② 根组件（App.vue）：整个应用最上层的组件，包裹所有普通小组件

组件树：

2. 组件组成

通常由三部分组成：

• template：结构 （只能有一个根元素）
• script: js逻辑
• style： 样式 (可以支持less，需要装包)

如图：

3. 组件分类

组件分类：

• 普通组件
• 根组件 （App.vue）

4. 普通组件的注册

两种注册方式：

a. 局部注册：

(1) 创建.vue组件 (单文件组件)

(2) 使用的组件内导入，并局部注册 components: { 组件名：组件对象 }

(3) 使用组件

如图：

b. 全局注册：

(1) 创建.vue组件 (单文件组件)

(2) main.js内导入，并全局注册 Vue.component(组件名, 组件对象)

(3) 使用组件

如图：

5. 注意事项

• 组件名规范 → 大驼峰命名法，如：HmHeader