vue2（三）

最新推荐文章于 2024-06-12 11:13:48 发布

counting stars240

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量168

点赞数 1

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_67398884/article/details/125829399

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、组件的生命周期

1.1 生命周期

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期三大阶段
以一个标签形式用到一个组件时就相当于new vue（），main.js文件是由webpack打包的，webpack发现main里面用到了APP组件所以就以APP为根组件，然后APP组件用到了left和right组件，它们两个里面也都嵌套了count组件，整个打包完以后webpack会生成两个js1文件，就是html文件上引入的两个文件。
在这里插入图片描述

1.1.1 组件创建阶段

可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

在这里插入图片描述
因为这个生命周期函数中props/data/methods都处于不可用状态，输出会报错。

created的时候props/data/methods数据都处于可用状态了，以后created函数非常常用，这个函数阶段可用ajax请求来拿数据，经常在它里面调用methods方法，请求服务器数据，然后把数据转存到data里面供template模板渲染的时候使用。
但是created阶段组件模板结构尚未生成，不能操作DOM，下图会显示null，（重点）
在这里插入图片描述

这个阶段创建模板结构，如果想要操作dom最早也要等到mounted阶段（重点）

1.1.2 组件运行阶段

在这里插入图片描述
beforeupdata触发条件是data发生变化，在这个阶段data是最新的，但是渲染到页面结构的内容还是之前的内容，页面还没有重新渲染。
updated阶段数据是最新的，渲染后的内容结构也是最新技能的。
在组件运行阶段，这个圆圈的步骤可以执行很多次，因为每次改动内容都会执行一圈操作。

1.1.3 组件销毁阶段

在这里插入图片描述

总结：创建阶段只用一次，组件运行阶段至少0次，至多无数次，组件销毁阶段也只有一次。

二、组件之间的数据共享

在项目开发中，组件之间的最常见的关系分为如下两种：
① 父子关系
② 兄弟关系
在这里插入图片描述

2.1 父子组件传值

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

2.1.1父向子传值

在这里插入图片描述
父向子数据共享的自定义属性是在子组件中定义，由父组件赋值给子组件来接收。

2.1.2 子向父传值

在这里插入图片描述
父组件中data要定义一个属性来接收子组件传来的值，子组件通过调用 $e mi t 方法触发一个自定义事件 n u m c han g e ，然后父组件第一步将绑定 n u m c han g e 自定义事件监听 g e tN e wC o u n t （），$ emit可以直接触发numchange（），然后将子组件this.count的值传给父组件val形参，numchange（）触发后getNewCount（）事件函数也被触发，将this.count的值赋值给countFromSon。
由于子组件add（）方法绑定了点击事件，所以，每次自增1之后都会触发一次子向父传值，即每次点击按钮都会传一次值。

2.2 兄弟组件数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。EventBus 的使用步骤
① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
② 在数据发送方，导入模块得到实例对象，调用== bus.$emit==(‘事件名称’, 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件
（this指的是vue实例对象，用bus接收的）在这里插入图片描述
创建一个eventBus.js模块，发送方要将data中的数据赋值发送到接收方的data数据，发送方和接收方都要引入对象vue，this.msg发送数据，val接收数据。发送方的share被触发后，接收方的share也被触发。

三、ref引用

3.1 什么是 ref 引用

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

3.1.1 使用ref引用DOM元素

如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：
在这里插入图片描述
总结：如果想要拿到某个DOM元素的引用，就给这个DOM元素起个ref的名字，然后this.$ref.(ref属性名字).style.color操作样式。

3.1.2使用 ref 引用组件实例

left组件中有按钮以及重置left数字为0的方法，APP组件的按钮若也行一点击重置left组件的数字正常来说不行，但是如果在app组件内的left标签中添加一个ref属性
在这里插入图片描述

然后在APP里面通过this.ref.comLeft调用到left组件就可以调用left组件里面的resetCount方法了，或者也可以直接访问里面的数据使其赋值为0。

按需展示文本框和按钮的案例
需求是点击按钮展示文本框同时按钮消失，文本框失去焦点文本框消失而按钮又出现，思路是定义一个布尔值false，使用v-if和v-else绑定文本框和按钮，点击按钮值变为true，文本框出现，按钮消失；文本框绑定一个失去焦点的事件，值变为false，文本框消失按钮出现；
在这里插入图片描述