3_组件

一、vue组件的构成

1.vue 组件组成结构

• template -> 组件的模板结构
• script -> 组件的 JavaScript 行为
• style -> 组件的样式

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

2.组件的template节点

vue 规定：每个组件对应的模板结构，需要定义到<template>节点中。

注意：<template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。

3.组件的script节点

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

3.1 name节点

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

3.2 data节点

vue 组件渲染期间需要用到的数据，可以定义在 data 节点中。

组件中的 data 必须是函数

vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。

3.3 methods节点

组件中的事件处理函数，必须定义到 methods 节点中。

4.style 节点

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

less 语法

如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：

• 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持
• 在 <style> 标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式

二、组件的基本使用

1.组件的注册

组件之间可以进行相互的引用
vue 中组件的引用原则：先注册后使用。

1.1 组件注册方式

vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：

• 被全局注册的组件，可以在全局任何一个组件内使用
• 被局部注册的组件，只能在当前注册的范围内使用

1.2 全局注册组件

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

1.3 局部注册组件

1.4 注册方式区别

• 被全局注册的组件，可以在全局任何一个组件内使用
• 被局部注册的组件，只能在当前注册的范围内使用

应用场景：
如果某些组件在开发期间的使用频率很高，推荐进行全局注册；
如果某些组件只在特定的情况下会被用到，推荐进行局部注册。

1.5 名称的大小写

在进行组件的注册时，定义组件注册名称的方式有两种：

• 使用 kebab-case 命名法（俗称短横线命名法，例如 my-swiper 和 my-search）

• 使用 PascalCase 命名法（俗称帕斯卡命名法或大驼峰命名法，例如 MySwiper 和 MySearch）

• 短横线命名法的特点：必须严格按照短横线名称进行使用

• 帕斯卡命名法的特点：既可以严格按照帕斯卡名称进行使用，又可以转化为短横线名称进行使用

注意：在实际开发中，推荐使用帕斯卡命名法为组件注册名称，因为它的适用性更强

1.6 name属性注册组件

在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称，

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

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是：

• 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
• 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

2.1 解决组件样式冲突

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域

2.2 scoped属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题

2.3 /deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。

3.props

为了提高组件的复用性，在封装 vue 组件时需要遵守如下的原则：

• 组件的 DOM 结构、Style 样式要尽量复用
• 组件中要展示的数据，尽量由组件的使用者提供

为了方便使用者为组件提供要展示的数据，vue 组件提供了 props 的概念。

3.1 什么是组件的props

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

3.2 在组件中声明props

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

3.3 未声明的props

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

3.4 动态绑定 props 的值

可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值

3.5 props 的大小写命名

4.Class与Style绑定

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

4.1 动态绑定

可以通过三元表达式，动态的为元素绑定 class 的类名。

4.2 数组语法绑定

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

4.3 对象语法绑定

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

4.4 绑定内联style

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