组件传参与生命周期

目录

一·组件传参

1.定义与使用

01  导入

02 注册

03 使用

2.父传子

1.接收参数并定义默认值

2.使用参数num

3.子传父

二·生命周期

1.概念

2.作用

3.生命周期 8个

 1.创建前后

  2.挂载前后

3.更新前后

4.销毁前后

---

一·组件传参

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 组件中

1.接收参数并定义默认值

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

2.使用参数num

data(){
    return {counter:this.num}
}

3.子传父

使用的事件 $emit
    

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

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

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

二·生命周期

1.概念

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

2.作用

创建后 发起ajax请求
挂载后操作dom
添加事件监听
销毁前移除间隔调用,事件监听

 说明:并不是每个生命周期都必须使用

3.生命周期 8个

 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实例的联系