Vue生命周期
每个组件从创建到销毁都会经历一系列特定过程,称为生命周期
生命周期函数
创建前后
beforeCreate 创建前
特点:有this 没有data与methods
created 创建后
特点:有data 没有$el dom 节点
用处:Ajax请求 定时器 事件监听
挂载前后
befoeMount 挂载前
特点:有$el 数据没有渲染
mounted 挂载后
特点:有dom 节点 数据也渲染
用处:操作节点 ajax请求
更新前后
beforeUpdate 更新前
特点: 会执行多次,数据更新 dom节点没有更新
updated 更新完毕
特点: 会执行多次,数据更新dom节点也更新
销毁前后
deforeDestroy 销毁前
特点:数据可以更新,视图已经不更新
用处:移除事件监听 停止定时器
destroyed 销毁完毕
特点:没有this 切换视图与vue的实例的联系
vue组件传参
定义与使用
先定义 CounterCom.vue 与 App.vue
// CounterCom.vue
template
<button>1</button>
template
App.vue
//导入
import CounterCom.vue from'./components/CounterCom.vue'
注册
components:{CounterCom}
使用
<CounterCom></CounterCom>
<counter-com></counter-com>
组件父传子传参
使用props,父传给子的数据是只读的(做默认值,读取显示)不能修改
CounterCom.vue组件中 接收参数并定义默认值
props:{
'num':{type:Number;default}
}
使用参数unm
data(){
return {counter:this.num}
}
组件子传父传参
使用的事件 $emit
CounterCom.vue
<button @click="counter++;$emit('counterchange',counter)">
App.vue
<CounterCom @counterchange="n=$event">
$emit(事件名,事件值)发送一次事件,事件名(counterchange)和事件值(counter)是自定义的
$event 固定写法 事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)