一起从零开始学VUE（8） 组件的生命周期及组件间的数据共享

组件的生命周期

生命周期和生命周期函数

1、生命周期是一个组件从创建、运行到销毁的整个阶段，强调的是一个时间段

2、生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行，强调的是一个时间点，下图为组件生命周期函数的分类

生命周期示意图

组件创建阶段的生命周期函数：

1. beforeCreate()是创建阶段的第一个生命周期函数，组件的props/methods/data都还处于不可用状态
2. created()此时组件的props/methods/data都已经创建好，处于可用状态。通常在它里面调用methods中的方法，请求服务器数据，并且将请求到的数据转存到data中，供template模板渲染时使用
3. mounted()是最早可以操作当前组件的DOM结构的生命周期函数，第一次渲染DOM元素

组件运行阶段的生命周期函数：

1. beforeUpdate()状态更新前调用，此时data中的值是最新的，但界面上的数据还是旧的，还没开始重新渲染DOM节点
2. updated()实例更新完调用，此时data中的值和界面显示的数据都已经更新完成，界面已被重新渲染完成

组件销毁阶段的生命周期函数：

1. beforeDestroy()实例销毁之前调用，此时实例仍然完全可用
2. destroyed()实例销毁后调用

组件之间的数据共享

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

①父子关系

②兄弟关系

父子组件之间的数据共享

父组件向子组件共享数据需要使用自定义属性，在父组件中用v-bind引用，在子组件中定义

自定义属性

通过props:["属性名"]来把父元素data中的数据传递给子组件，注意props是只读的，不能直接修改props。

自定义事件

• 修改数据时，子组件中通过this.$emit('函数名'，传递的值)来触发自定义事件
• 父组件中使用@ 绑定事件，子组件向父组件传递的数据通过val接收

兄弟组件之间的数据共享

在vue 2.x中，兄弟组件之间数据共享的方案是EventBus

EventBus的使用步骤

1. 创建eventBus.js模块，并向外共享一个Vue的实例对象
2. 在数据发送方，调用bus.$emit('事件名称',要发送的数据)触发自定义事件
3. 在数据接收方，调用bus.$on('事件名称',事件处理函数)注册一个自定义事件