全局 vuex
父子组件
- 父组件 -> 子组件
<food @add='addFood' :food=food></food>
- 子组件 -> 父组件
props:{
food:{
type:Array,
default:[]
}
}
this.$emit('add',data)
eventBus
功能:实现组件间通信,点击外部关闭select=>同一时间最多有一个select处于下拉状态
建立eventBus.js
import Vue from 'vue'
const eventBus = new Vue()
export { eventBus }
全局组件中定义click事件
resetComponent() { eventBus.$emit('reset-component') }
具有select的组件中触发eventBus
mounted () {
eventBus.$on('reset-component', () => {
this.isDrop = false
})
// 每一个select组件 只要触发reset-component 就会使this.isDrop重置
}
toggleDrop(e) {
e.stopPropagation() //注意要阻止冒泡
eventBus.$emit('reset-component') //多个select 点击别的select也触发事件
this.isDrop = !this.isDrop
}