props和$emit
//父组件
<Child :list="list" @add="addFnc"></Child>
methods:{
addFnc(data){
//do something
}
}
//子组件
<button @click="addFnc(data)"></button>
methods:{
addFnc(){
this.$emit('add', data)
}
}
组件间通讯和自定义事件
父子通讯 props $emit
兄弟组件或者隔代组件使用自定义事件进行通讯
import Vue from 'vue'
export default new Vue()
//绑定自定义事件
event.$on('name', functionName)
//调用自定义事件
event.$emit('name',data)
//在beforeDestroy中销毁（解绑）自定义事件 以防内存泄露
event.$off('name', functionName)
组件生命周期
- 单个组件
- 父子组件
由外到内
