Vue3:组件化开发（上）

1、 什么是组件化开发

• 组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

2、组件化开发的好处

   ⚫ 提高了前端代码的复用性和灵活性
   ⚫ 提升了开发效率和后期的可维护性

3、 vue 组件组成结构

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

4、组件的 template 节点

• vue 规定：每个组件对应的模板结构，需要定义到 <template> 节点中。
  • template节点
• 注意：<template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。

4.1 在 template 中定义根节点

• 在 vue 2.x 的版本中，<template> 节点内的 DOM 结构仅支持单个根节点：
  • vue2
• 但是，在 vue 3.x 的版本中，<template> 中支持定义多个根节点：
  • vue3

5、 组件的 script 节点

• vue 规定：组件内的 <script> 节点是可选的，开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。<script > 节点的基本结构如下：
  • script节点

5.1 script 中的 name 节点

• 可以通过 name 节点为当前组件定义一个名称：
  • name节点
• 在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：
  • 调试

5.2 script 中的 data 节点

• vue 组件渲染期间需要用到的数据，可以定义在data 节点中：
  • data节点
• vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义 data 数据节点时，下面的方式是错误的：
  • data函数

5.3 script 中的 methods 节点

• 组件中的事件处理函数，必须定义到 methods 节点中，示例代码如下
  • methods节点

5.4 组件的 style 节点

• vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。<script > 节点的基本结构如下：
  • style节点
• 其中 <style> 标签上的 lang="css" 属性是可选的，它表示所使用的样式语言。默认只支持普通的 css 语法，可选值还有 less、scss 等。

5.4.1 让 style 中支持 less 语法

• 如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：
  ① 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持
  ② 在 <style> 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式
• less语法

6、注册组件的两种方式

• vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：
    ⚫ 被全局注册的组件，可以在全局任何一个组件内使用
    ⚫ 被局部注册的组件，只能在当前注册的范围内使用

6.1 全局注册组件

• 全局注册组件
• 使用 app.component() 方法注册的全局组件，直接以标签的形式进行使用即可，例如：
  
  全局注册组件使用

6.2 局部注册组件

• 局部注册组件

6.3 全局注册和局部注册区别

• 全局注册和局部注册区别

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

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

6.5 通过 name 属性注册组件

• 在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称，示例代码如下：
    
  name属性注册组件

7、 组件之间的样式冲突

• 默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是：
     ① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
     ② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

7.1 如何解决组件样式冲突的问题

• 为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下：
  
  自定义属性
• style 节点的 scoped 属性
  
  scope属性

7.2 /deep/ 样式穿透

• 如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。
  
  deep样式穿透
• 注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。

8、 组件的 props

• 为了提高组件的复用性，在封装 vue 组件时需要遵守如下的原则：
     ⚫ 组件的 DOM 结构、Style 样式要尽量复用
     ⚫ 组件中要展示的数据，尽量由组件的使用者提供

8.1 什么是组件的 props

• props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。代码示例如下：
  
  props
• props 的作用：父组件通过 props 向子组件传递要展示的数据。
  props 的好处：提高了组件的复用性。

8.2 在组件中声明 props

• 在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。示例代码如下：
  
  声明props

8.3 无法使用未声明的 props

• 如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用，示例代码如下：
  
  未声明props

8.4 动态绑定 props 的值

• 可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值，示例代码如下：
  
  动态绑定props

8.5 props 的大小写命名

• 组件中如果使用“camelCase(驼峰命名法)”声明了 props 属性的名称，则有两种方式为其绑定属性的值：
  
  大小写命名

9、 Class 与 Style 绑定

• 在实际开发中经常会遇到动态操作元素样式的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。

9.1 动态绑定 HTML 的 class

• 可以通过三元表达式，动态的为元素绑定class 的类名。示例代码如下：
  
  动态绑定样式

9.2 以数组语法绑定 HTML 的 class

• 如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式：
  
  绑定多个样式

9.3 以对象语法绑定 HTML 的 class

• 使用数组语法动态绑定class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化：
  
  对象语法绑定样式

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

• :style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
  
  对象语法绑定样式