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

vue组件梳理