vue组件传参与vue的生命周期

vue组件传参

定义与使用

第一步 CouterCom.vue

<template>
    <div id="app">
        <button>1</button>
    </div>
</template>

第二步 App.vue

01导入CouterCom组件
import CouterCom from './components/CouterCom.vue'

02 注册组件

components: {
            CouterCom,
 }

03 使用组件

<CouterCom></CouterCom>

或<Couter-com></Couter-com>

父组件向子组件传参

父组件向子组件传参用到了props，传递的参数只能获取无法进行修改

第一步App.vue
<Couter-com :aa="123"></Couter-com>

第二步

export default{
        props:{
                "aa":{
                               type:Number,//类型为数字
                                default:1,//默认值

                        }
            }
        }

}

子传父

子传父用到$emit 调用方法
CounterCom.vue
<button @click="counter++; $emit('counterchange',counter)">

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

$emit(事件名，事件值)
$event固定写法 代表的是子元素传来的值

组件传参的视图
父传子：
 子传父：

 

vue生命周期

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

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

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