一、组件的生命周期
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
m
i
t
方法触发一个自定义事件
n
u
m
c
h
a
n
g
e
,然后父组件第一步将绑定
n
u
m
c
h
a
n
g
e
自定义事件监听
g
e
t
N
e
w
C
o
u
n
t
(),
emit方法触发一个自定义事件numchange,然后父组件第一步将绑定numchange自定义事件监听getNewCount(),
emit方法触发一个自定义事件numchange,然后父组件第一步将绑定numchange自定义事件监听getNewCount(),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,文本框消失按钮出现;