组件传参+生命周期知识点

一.组件传参

1.定义与使用

第一步：CounterCom.vue
        <template>
           <button>1</button>
        </template>

第二步：

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

02 注册
components:{CounterCom}

03 使用
<CounterCom></CounterCom>
<counter-com></counter-com>

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

例如：

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

CounterCom.vue 组件中
//01 接收参数并定义默认值
props:{
    "num":{type:Number,default:1}
}
// 02 使用参数num
data(){
    return {counter:this.num}
}

3.子传父   使用的事件 $emit

01例如：

CounterCom.vue
<button @click="counter++; $emit('counterchange',counter)">

App.vue
<CounterCom @counterchange="n=$event">

02 $emit

$emit(事件名,事件值)  发送一次事件,事件名(counterchange)和事件值(counter) 是自定义的

$event 固定写法,事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)

4.组件传参视图

父传子如图所示

 子传父如图所示

二.生命周期

1.概念

每个组件从创建到销毁都会经历一系列的过程，
这个过程称为生命周期
把过程执行的回调函数称作钩子函数

2.作用

创建后，发起ajax请求
挂载后操作dom
添加事件监听
销毁前移除间隔调用 事件监听
 说明：并不是每个生命周期都需要使用

3.8种生命周期

创建前后	特点	用处
beforeCreate创建前	有this,没有data,methods,dom节点
created创建后	有data,没有el	ajax请求，定时器，事件监听
挂载前后	特点	用处
beforeMount挂载前	有$el,没有渲染数据
mounted挂载后	有dom节点，数据也渲染	操作节点，ajax请求
更新前后	特点	用处
beforeUpdate更新前	会执行多次， 数据更新，dom节点没有更新
updated更新完毕	会执行多次， 数据更新，dom节点也更新
销毁前后	特点	用处
beforeDestroy销毁前	数据可以更新，视图已经不更新	移除事件监听，停止计时器
destroyed销毁完毕	没有this，切换视图与vue实例的关系