vue组件间传递信息

全局 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 
	  }