Vue中的组件传参与生命周期

一.组件传参

一.定义与使用
    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>

二.父传子
    使用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的第二个参数)

四.组件传参
    父传子
        
    子传父
       

五.组件的设计
    
    props
        默认值:value
        最大值:max
        最小值:min
        步进制:step
(一次加多多少)
    data
        被改变的值:num
    methods
        加add
        减minus
    事件
        numchange
数字发送变化
    template
        <button>-</button>
<input/>
<button>+</button>

六.组件设计
SwiperCom
    props
        gallery 传入图片的数组
        inter 间隔时间
        current:当前第几张幻灯片
    data
        index 当前显示第几张
    methods
        auto 自动播放
        check检查边界
        overHd 移入停止
        outHd 移除
    事件
    template
        <div class="swiper">
     <div class="swiperitem">幻灯片<img></div>
    <div class="controls">上一张,下一张</div>
   <div class="thumbs">小圆点,点击小点切换到小点对应幻灯片</div>
</div>

，七.

组件设计
文字滚动时间
MarrQuee
    props
        str 滚动的 文本
        inter 间隔时间
    data
        msg
    methods
        auto自动播放

二.Vue生命周期

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

二.作用
    创建后 发起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实例的联系
    App与LifeTime 组件 哪个先创建,哪个先挂载?