vue2.0 组件

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

vue2.0 组件目录

---

---

9. vue 组件

9.1 什么是组件化开发

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

9.2 vue 中的组件化开发

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

9.3 vue 组件的三个组成部分

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

1. template

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

2. script

• vue 规定：开发者可以在 <script>节点中封装组件的 JavaScript 业务逻辑。
• .vue 组件中的 data 必须是函数
• vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。

3. style

• vue 规定：组件内的 <style> 节点是可选的，开发者可以在<style>节点中编写样式美化当前组件的 UI 结构。
• 在 <style> 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式

9.4 组件之间的父子关系

1. 使用组件的三个步骤

• 步骤1：使用 import 语法导入需要的组件
• 步骤2：使用 components 节点注册组件
• 步骤3：以标签形式使用刚才注册的组件

2. 通过 components 注册的是私有子组件

• 例如：

  • 在组件 A 的 components 节点下，注册了组件 F。
  • 则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

• 请大家思考两个问题：

  1. 为什么 F 不能用在组件 C 中？
  2. 怎样才能在组件 C 中使用 F？

3. 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

9.5 组件的 props

• props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！

• 它的语法格式如下：

1. props 是只读的

• vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：

• 要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

2. props 的 default 默认值

• 在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：

3. props 的 type 值类型

• 在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：

4. props 的 required 必填项

• 在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代码如下：

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

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

9.6 组件的基本使用

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

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

2. style 节点的 scoped 属性

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

3. /deep/ 样式穿透

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

9.7 动态组件

1. 什么是动态组件

• 动态组件指的是动态切换组件的显示与隐藏。

2. 如何实现动态组件渲染

• vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下：

• component 标签是专门用来占位的
• 给 is 属性所表示的组件，来进行展位

<component is="组件的注册名称"></component>

3. 使用 keep-alive 保持状态

• 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组件的状态。示例代码如下：

 <keep-alive include="Right,Left"><component :is="comName"></component></keep-alive>

• keep-alive 可以保证内部的组件不会被销毁
• 注意：默认情况下，keep-alive 会缓存内部所有的组件
• include=“Right” 表示：只缓存名字叫 Right 的组件，其它组件不会被缓存
• 注意：在 include 中，逗号前后千万不要加空格，否则会有问题

4. keep-alive 对应的生命周期函数

• 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
• 当组件被激活时，会自动触发组件的 activated 生命周期函数。

 destroyed() {console.log('destroyed')},// 组件被激活的时候，会自动触发 activated 生命周期函数// 组件在被激活的时候，以及组件第一次被创建的时候，都会触发 activated 生命周期函数activated() {console.log('---- activated ----', '组件被激活了')},// 组件被缓存的时候，会自动触发 deactivated 生命周期函数// 只有组件被缓存的时候，才会触发 deactivated 生命周期函数deactivated() {console.log('---- deactivated ----', '组件被缓存了')}

5. keep-alive 的 include 属性

• include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔

      <!-- keep-alive 可以保证内部的组件不会被销毁 --><!-- 注意：默认情况下，keep-alive 会缓存内部所有的组件 --><!-- include="Right" 表示：只缓存名字叫 Right 的组件，其它组件不会被缓存 --><!-- 注意：在 include 中，逗号前后千万不要加空格，否则会有问题 --><keep-alive include="Right,Left"><component :is="comName"></component></keep-alive>