vue(3)--生命周期,组件传值---2019.5.22学习笔记

生命周期:一个组件从创建到销毁的过程就是生命周期     生命周期钩子函数

beforeCreate()

created()

beforeMount()

mounted()

beforeUpdata()

updated()

beforeDestroy()

destroyed()

四个阶段:

创建

挂载

更新

销毁

一.组件初始化的时候会执行哪些生命周期函数?beforeCreate()   created()   beforeMount()   mounted()

二.哪些输入那个命周期函数会执行多次?beforeUpdata()    updated()

beforeCreate()   当组件实例化的时候,做的一个初始化操作   注意当前生命周期是组件还没有实例化完毕,因此你是访问不到当前组件的data或者methods的属性和方法,以及其他生命周期函数(应用:初始化的loading)

created()   创建后    

1.当created执行完毕之后,会将data以及methods身上所有的属性和方法偶读添加到vm的实例身上

2.created生命周期函数中会将data身上所有的属性都添加上一个getter/setter方法  让data的属性具有响应式的特性

3.当前生命周期函数中可以用来进行ajax数据的请求

beforeMount()   挂载前

1.数据和模板还未进行结合,可以对数据做最后的一次处理

2.在这个生命周期函数中访问不到真实的DOM结构

mounted()   挂载后

1.数据与模板进行相结合,生成了真实的DOM树

2.在这个生命周期函数中我们可以通过this.$refs.属性名称  获取到真实的DOM结构对DOM进行处理

3.一般情况下我们都会在当前生命周期函数中做方法的实例化

beforeUpdata()  更新前

1.更新的数据和模板还未进行结合,可以对数据做最后的修改

2.在当前生命周期函数中也可以获取到真实的DOM结构

updated()   更新后

1.更新的数据和模板进行相结合,在这个生命周期函数中我们可以获取到数据更新后的DOM结构,以及对数据的更新做一个监听

beforeDestroy()   销毁前(应用:事件监听的解绑,事件的移除...)

1.在当前生命周期函数中依旧是可以访问到DOM结构的

destroyed()   销毁后

1.在当前生命周期函数中访问不到真实的DOM结构了

2.在这个生命周期中会将当前vm与DOM之间的关联全部断开

 

组件传值
一.父传子
传递:当父组件给子组件进行传值的时候,给子组件的标签上加一个自定义属性 值为需要传递的数据
接收:在子组件内部通过props进行接收,props进行接收的方式有两种,一种是数组一种是对象
数组接收:
props:["自定义属性"]
对象接收:
props:{
自定义属性:{
type:类型,
default:"默认值",
required:必须传递true
}
}
二.子传父
接收:当子组件给父组件进行传值的时候,首先给子组件标签绑定一个自定义方法,值为一个函数,注意这个函数不需要加(), 传递过来的值通过这个函数就可以接收到
传递:在子组件内部通过this.$emit("自定义方法名称",需要传递的参数)来进行传递数据
三.非父子组件传值
a.公共的Vue实例
1.首先需要让所有子组件都拥有共同的事件订阅的方法 Vue.prototype.Observer = new Vue();
2.给需要传值的组件调用this.Observer.$emit("事件名称",传递的值)
3.给需要接收的组件调用this.Observer.$on("事件名称",回调函数)
b.EventBus(自己了解)
c.手动封装$on $emit $off 事件订阅
on(事件名称,回调函数)
1.判断事件名称是否存在,如果存在直接将这个函数添加到数组中去
2.当不存在的时候,创建一个数组,然后将函数添加到数组中去
emit(事件名称,需要传递的参数)
1.半段事件名称是否存在,如果不存在则不做触发
2.入过存在,遍历数组将数组中的函数同意进行触发,然后将徐亚传递的参数传递给所有的函数
off(事件名称,需要解绑的函数)
1.判断时间名称是否存在,如果不存在则不做处理
2.如果存在,再去判断第二个参数是否存在,如果存在则将这个函数从数组中移除,如果不存在,将整个数组清空

转载于:https://www.cnblogs.com/M29006/p/10904812.html