父向子传值
//父组件中内容 app.vue<MyList/ :list="list">data(){list:[]}//子组件中 list.vue<li v-for="item in list" :key="item.id"></li>props:{lsit: Array}
子向父
子组件内容<input type="text" v-model="title"><button @click="add">添加</button>data(){title:''}methods:{add(){this.$emit('add',this.title) //在父组件中触发add事件,将值带出去}}父组件内容<MyInput @add="add" />methods:{add(title){this.list.push({id:3,title:title //简写成title也可以})}}
兄弟组件通信:将input中的内容在list中输出
中间件event-bus.vueimport Vue from 'vue'const eventBus = new Vue()export default eventBus兄弟组件 input.vueimport eventBus from './event-bus'methods:{add(){eventBus.$emit('addItem',this.title)}}兄弟组件 list.vueimport eventBus from './event-bus'methods:{handleAddTitle(title){console.log(title) //输出从兄弟组件中传过来的值}}mounted(){ //组件挂载的时候 真实dom渲染eventBus.$on('addItem',this.handleAddTitle)}beforDestroy()eventBus.$off('addItem',this.handleAddTitle) //组件销毁的时候 解绑事件,//避免潜在的内存泄漏的问题}
父子组件生命周期执行顺序
父:created()
子:created()
子:mounted()
父:mounted()
更新
父:beforeUpdate()
子:beforeUpdate()
子:updated()
父:updated()
销毁
父:beforeDestory()
子:beforeDestory()
子:Destory()
父:Destory()