前言

关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用  。

这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。

看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！

目录

前言

组件化开发思想

1. 什么是组件化开发

2. 组件化开发的好处

3. vue 中的组件化开发

vue 组件的构成

1. vue 组件组成结构

2. 组件的 template 节点

2.1 在 template 中使用指令

2.2 在 template 中定义根节点

3. 组件的 script 节点

3.1 script 中的 name 节点

3.2 script 中的 data 节点

3.3 script 中的 methods 节点

4. 组件的 style 节点

4.1 让 style 中支持 less 语法

组件的基本使用

1. 组件的注册

1.1 注册组件的两种方式

1.2 全局注册组件

1.3 使用全局注册组件

1.4 局部注册组件

1.5 全局注册和局部注册的区别

1.6 组件注册时名称的大小写

1.7 通过 name 属性注册组件

2. 组件之间的样式冲突问题

2.1 思考：如何解决组件样式冲突的问题

2.2 style 节点的 scoped 属性

2.3 /deep/ 样式穿透

3. 组件的 props

3.1 什么是组件的 props

3.2 在组件中声明 props

3.3 无法使用未声明的 props

3.4 动态绑定 props 的值

3.5 props 的大小写命名

4. Class 与 Style 绑定

4.1 动态绑定 HTML 的 class

4.2 以数组语法绑定 HTML 的 class

4.3 以对象语法绑定 HTML 的 class

4.4 以对象语法绑定内联的 style

封装组件的案例

1. 案例效果

2. 用到的知识点

3. 整体实现步骤

写在最后

组件化开发思想

1. 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。例如：ibootstrap - Bootstrap可视化布局系统 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的方式，快速生成一个页面的布局结构。

2. 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面：

• 提高了前端代码的复用性和灵活性

• 提升了开发效率和后期的可维护性

3. vue 中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

vue 组件的构成

1. vue 组件组成结构

每个 .vue 组件都由 3 部分构成，分别是：

• template -> 组件的模板结构

• script -> 组件的 JavaScript 行为

• style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

2. 组件的 template 节点

vue 规定：每个组件对应的模板结构，需要定义到