VUE组件的生命周期& 数据共享

悠悠 2024-03-31 13:43 56阅读 0赞

**推荐教程：[前端框架Vue2+Vue3全套视频][Vue2_Vue3]**

**生命周期 & 生命周期函数**

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

生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。 注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

**组件生命周期函数的分类**

![33ee75f863164f1ba52778b4de1fecea.png][]

**生命周期图示**

可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：

https://cn.vuejs.org/v2/guide/instance.html\#生命周期图示

**组件之间的数据共享**

**组件之间的关系**

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

① 父子关系 ② 兄弟关系

![c67974ca441b4f928b24a7c9bd29a332.png][]

**父子组件之间的数据共享**

父子组件之间的数据共享又分为： ① 父 -> 子共享数据 ② 子 -> 父共享数据

**父组件向子组件共享数据**

父组件向子组件共享数据需要使用自定义属性。示例代码如下：

![08b4a22227c747f68257c9969386a6f8.png][]

![69050843bbdb42cb9a8139eed65e4fb8.png][]

**子组件向父组件共享数据**

子组件向父组件共享数据使用自定义事件。示例代码如下：

![7d63721b17614164a2742ac940bc8aae.png][]

![a250ce423a0345629d567b2564555846.png][]

**兄弟组件之间的数据共享**

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

![3e383b2566144bc981ee2c58033e983e.png][]

EventBus 的使用步骤

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

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

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

**ref 引用**

**1.什么是 ref 引用**

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，

组件的 $refs 指向一个空对象。

![99c8841a62a14af18a79dc3705e11c72.png][]

**2.使用 ref 引用 DOM 元素**

如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：

![2fc23307903445128ae3c589f2929470.png][]

**3.使用 ref 引用组件实例**

如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

![48e424b8972b420b848f322b813e211a.png][]

**4. 控制文本框和按钮的按需切换**

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：

![745681b375004cdca410656e3eefa47f.png][]

**5. 让文本框自动获得焦点**

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的

.focus() 方法即可。示例代码如下：

![c7875f00eac345f983f3c52bfea035e6.png][]

**6. this.$nextTick(cb) 方法**

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

![58ab093120e4487380367a43a033f1ab.png][]

[Vue2_Vue3]: http://yun.itheima.com/course/933.html?capid=1
[33ee75f863164f1ba52778b4de1fecea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9f796676518d4fc19610aea36f33f98d.png
[c67974ca441b4f928b24a7c9bd29a332.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f318d721d6b74cee8ce271505ff96278.png
[08b4a22227c747f68257c9969386a6f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7fed237af2e344f5963d33fbcaaa50ae.png
[69050843bbdb42cb9a8139eed65e4fb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6ba789fac07242f7b9dc1048b0b3dc9f.png
[7d63721b17614164a2742ac940bc8aae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9637319d1bf34c5c8ef1d9f08a55c7c3.png
[a250ce423a0345629d567b2564555846.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/73f1d2b56d2444ba91de694982a06594.png
[3e383b2566144bc981ee2c58033e983e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d0a7d47f01e24959976332eccf98a715.png
[99c8841a62a14af18a79dc3705e11c72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1e110a49e5734f5f8fe0ccd199d48a41.png
[2fc23307903445128ae3c589f2929470.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1d7141a65f76451aa64fc6c94778eb92.png
[48e424b8972b420b848f322b813e211a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d3dc03a07ba04060b560a63af54d80e8.png
[745681b375004cdca410656e3eefa47f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b4b56f13265a464386bd6ad820aea38b.png
[c7875f00eac345f983f3c52bfea035e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6c3778eb2fee472f9b6b5a6f6c260adf.png
[58ab093120e4487380367a43a033f1ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bbbc88a1bd9b4b0a8a9da0f722e3aaab.png