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 
	  }