vue组件开发

2024-01-10 06:20:02

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

文章来源:https://blog.csdn.net/m0_72560900/article/details/135491487
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。