vue的生命周期与组件传参

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的第二个参数）