一.组件传参
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实例的关系 |