vue组件
未经同意 禁止转载
通信传值
1. props
父组件向子组件传值，子组件通过props接收值
props:{
a:{
type: Number,
default: 123
}
}
2. $emit
子组件通过$emit向父组件事件传值
//父组件
<Component @aaa='fn'></Component>
fn(value){
console.log(value)
}
//子组件
asd(){
this.$emit('aaa',value)
}
3.自定义事件
//1.在需要的组件绑定自定义事件
import event from './event'
mounted(){
//写函数名func1而不是func1()，目的是方便销毁
event.$on('fn1',this.func1)
},
methods:{
func1(value){
console.log(value)
}
}
//2.在传值的组件中触发自定义事件
event.$emit('fn1',value)
//3.在需要的组件里销毁绑定的自定义事件
beforeDestroy(){
event.$off('fn1',this.func1)
}
组件生命周期
1. 生命周期
挂载阶段
BeforeCreate,created,BeforeMount,mounted
更新阶段
BeforeUpdate,updated
销毁阶段
BeforeDestroy,destroyed
2. created和mounted的区别
created:Vue实例挂载完毕，还没开始渲染
mounted:页面已经渲染完毕
3. BeforeDestroy一般做什么
解除绑定、销毁子组件以及事件监听器
4. 父子组件生命周期顺序
父组件created->子组件created->子组件mounted->父组件mounted
父组件beforeUpdate->子组件beforeUpdate->子组件updated->父组件updated
父组件beforeDestroy->子组件beforeDestroy->子组件destroyed->父组件destroyed
