Vue2（三）组件、生命周期、数据共享

上篇知识回顾：

• 什么是watch侦听器？
• 什么是计算属性？
• vue-cli脚手架的使用

本篇概要

什么是Vue组件？

Vue组件从创建到销毁会经历哪些阶段？

Vue组件之间如何实现数据共享？

一、什么是Vue组件？

vue 是一个支持组件化开发的前端框架。

vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件

1、组件化开发：

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

2、vue 组件的三个组成部分

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

1. <template> -> 组件的模板结构

每个组件对应的模板结构，需要定义到 <template> 节点中,该节点只起包裹作用，不会被渲染，且该节点内只能包含唯一的根节点

2. <script> -> 组件的 JavaScript 行为 ，

组件相关的data数据、methods方法等都要定义到<script>里的export defult{}中去

3. <style> -> 组件的样式 , 且支持less的语法格式

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

其中，data必须为函数形式定义数据对象

export defult{
data(){
  return {
    username: '',
    password: ''
    }
  }
}

3、组件的使用

（1）步骤：

1：使用 import 语法导入需要的组件

2：使用 components 节点注册组件

3：以标签形式使用刚才注册的组件

以上的形式注册的组件为私有组件，只能在当前的.vue组件中使用

3、全局组件

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

全局组件注册后，可以在任意.vue组件中使用

4、组件的props属性

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

注意：props属性是只读的，不能修改，否则会报错

（1）props定义的两种形式

• 数组：

• 对象：

还可以通过自定义属性对象的defult属性来给定默认值。

（2）props的赋值

在使用某一组件时，可以通过以下形式，给该组件中的props赋值（假设Left组件内有自定义属性msg）

<Left :msg="message"></Left>

<script>
  data(){
   return {
     msg: 'hello world!'
   }
}

</script>

二、组件的生命周期

1、概念：

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。

2、生命周期函数：

由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

Vue组件最早可以在created阶段时请求数据

定义组件在created阶段时行为的语法格式如下：

export defult{
  created(){//组件的props/data/methods都已经创建好,但还没渲染到页面上的阶段
   //发起ajax请求，请求数据
}
}

生命周期各阶段的介绍详见下图:

图源：黑马

三、数据共享

在项目开发中，组件之间的最常见的关系分为如下两种：

① 父子关系

② 兄弟关系

可以联想一下二叉树的结点之间的关系。

1、父子组件之间的数据共享

（1）父 -> 子共享数据

父组件在使用子组件标签时，可在标签内给子组件的属性赋值

（2）子 -> 父共享数据

子组件调用一个自定义方法，并将数据对象值作为方法的参数，而父组件则在使用子组件标签时，用@监听该方法，获得子组件的数据对象值

2、兄弟之间数据共享

创建EventBus为中间件

步骤：

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

总结：

看到这里，想必你的眼睛已经掌握了Vue组件的使用了吧！

Vue项目基于单页面应用（SPA：single-page application）开发。

通过JS操作DOM, 动态重写当前页面来与用户交互，避免了页面之间切换而打断用户体验，页面上所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。

因此，在使用Vue框架时，组件的创建和使用、组件之间的数据共享固然会非常重要。

如果大家觉得这篇文章对你们有帮助，希望可以点赞支持哦！