文章目录

• Vue3组件学习
• • 1. 基本概念
  • • 1.1. 组件的概念和作用
    • 1.2. 组件的分类和使用场景
    • • 1.2.1. 基础组件
      • 1.2.2. 业务组件
    • 1.3. 组件的生命周期钩子函数
• 总结

Vue3组件学习

1. 基本概念

1.1. 组件的概念和作用

• Vue中的组件是一种可复用的代码单元，它可以封装HTML、CSS和JavaScript代码，使得我们可以更好地组织和管理代码，并且可以提高代码的复用性和可维护性。

• 组件可以理解为页面的一部分，它可以接受输入（props）和输出（events），并且可以在组件内部实现自己的逻辑和功能。使用组件可以将一个大型应用程序拆分成多个小型的、独立的组件，从而方便管理和维护。

• 在Vue3中，组件有两种实现方式：单文件组件和对象式组件。单文件组件是一种将HTML、CSS和JavaScript代码封装到一个文件中的方式，它可以更好地组织和管理代码，并且可以使用预编译器和模块化工具。对象式组件是一种使用JavaScript对象来定义组件的方式，它比较简单，但是不够灵活。

• Vue中的组件可以包含以下几个部分：

  • 模板（template）：组件的HTML代码，用于渲染组件的内容。
  • 样式（style）：组件的CSS代码，用于定义组件的样式。
  • 脚本（script）：组件的JavaScript代码，用于实现组件的逻辑和功能。
  • 属性（props）：组件接收的输入数据，可以是任何类型的数据。
  • 事件（events）：组件触发的输出事件，可以是任何类型的事件。

例子1：单文件组件

单文件组件的文件格式通常是.vue，它包含了三个部分，用