Vue2.0教程(七） 生命周期，组件数据共享，ref引用，nextTick方法

组件的生命周期 （面试必问）

1.生命周期&生命周期函数

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

• 注意：生命质周期强调的是时间段，生命周期函数强调的是时间点。

2.组件生命周期函数分类

1）组件创建阶段
组件创建的生命周期函数
new Vue() -> beforeCreate -> created ->beforeMount ->mounted
2）组件运行阶段
->beforeUpdate ->updated
3）组件销毁阶段
->beforeDestroy ->destroyed

3.生命周期示意图

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

组件之间的数据共享

1.组件之间的关系

在项目开发中，组件之间最常见的关系分为如下两种:
1)父子关系
2)兄弟关系

2. 父子组件之间的数据共享

父子组件数据共享又分为:
1)父 -> 子 共享数据
2)子 -> 父 共享数据

2.1 父组件向子组件共享数据需要使用自定义属性

示例代码如下：

//父组件
<Son :msg="message" :user="userinfo"> </Son>
data(){
  return {
    message:'hello',
    userinfo:{name:'zs',age:20}
  }
}

//子组件
<template>
  <div>
    <h3>Son组件</h3>
    <p>父组件传过来的msg值是:{{msg}} </p>
    <p>父组件传过来的user值是:{{user}} </p>
  </div>
</template>

props:['msg','user']

2.2 子组件向父组件传递数据

子传父需要用到自定义事件

//父组件
<Son @numberchange='getMessage'></Son>
data:{
return {
	data:{
		message:''
	}
	method:{
		getMessage(val){
			this.message = val
		}
	}
}
-------------------------------------
//子组件
data:{
	return {
		count:1,
		sonData:'aaa',
	}
}
methods:{
	add(){
		this.count++
		this.$emit('numchange',this.sonData)
	}
}

3.兄弟组件之间数据共享

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

ref引用

1.使用ref引动DOM元素

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

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

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

4.让文本框自动获得焦点

5. this.$nextTick(cb）方法

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