组件传参与Vue生命周期

一.组件传参

定义与使用

App.vue
01  导入
import CounterCom from './components/CounterCom.vue'

02 注册
components:{CounterCom}

03 使用
<CounterCom></CounterCom>

父传子

使用props

父传给子的数组是只读的(做默认值,读取显示)不能进行修改

App.vue文件中
<CounterCom :num="10">

CounterCom.vue 组件中
01 接收参数并定义默认值

props:{
    "num":{type:Number,default:1}
}


02 使用参数num

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

二.Vue生命周期

Vue生命周期有八个并且分为四类

(🚩为特别声明 ✳ 为重要)

1.创建前后

beforeCreate 创建前
特点:有this,没有data与methods方法

created创建后（✳）
特点:有data,没有$el,dom节点
🚩用处:ajax请求,定时器,事件监听

2.挂载前后

beforeMount 挂载前
特点:有$el ,数据没有渲染

mounted挂载后（✳）
特点:有dom节点,数据也渲染
🚩用处:操作节点,ajax请求

3.更新前后

beforeUpdate更新前
特点: 会执行多次，数据更新,dom节点没有更新

updated 更新完毕
特点: 会执行多次，数据更新,dom节点也更新

4.销毁前后

✳ beforeDestroy 销毁前
特点:数据可以更新,视图已经不更新
🚩用处:移除事件监听,停止定时器

destroyed 销毁完毕
特点:没有this,切换视图与vue实例的联系