什么叫事件中心

• 一個事件可以滿足監(jiān)聽 (.$on)，觸發(fā) (.$emit)，取消監(jiān)聽（.$off）那他就可以叫事件中心
• 所以一個new vew（）可以構(gòu)成一個實踐中心

如何使用EventBus

• 在data里面聲明一個evetBus
• 在最外層組件的屬性上加一個provide屬性

data(){
  return {
    eventBus: new Vue()
  }
},
provide () {
  return {eventBus: this.eventBus}
},

• 然后只需要在子組件或?qū)O子組件注入，那么該組件就能訪問到這個事件中心了

inject:['eventBus'],  //注入
mounted() {
    //監(jiān)聽eventbus
  this.eventBus.$on('update:selected',(name,vm)=>{
    let headLeft = this.$el.getBoundingClientRect().left
    let {width,left} = vm.$el.getBoundingClientRect()
    this.$refs.line.style.width = width + 'px'
    this.$refs.line.style.left = left-headLeft +'px'
  })
},

• 需要注意的是，事件中心出發(fā)的事件和vue原生的事件是不一樣的，不能使用@綁定在html標(biāo)簽里面

一個完整的例子

• 爺爺組件注冊eventBus，并觸發(fā)事件
• this.$options.name：組件的name，this.name：組件的data或prop的name

data(){
  return {
    eventBus: new Vue()
  }
},
provide () {
  return {eventBus: this.eventBus}
},
mounted() {
  this.$children.forEach(vm=>{//父組件的兒子
    if (vm.$options.name === 'WheelTabsHead'){
      vm.$children.forEach(childVm=>{ //父組件的孫子
        if (childVm.$options.name === 'WheelTabsItem' && childVm['name'] === this.selected){
          //update:selected觸發(fā)事件
          this.eventBus.$emit('update:selected', this.selected,childVm)
        }
      })
    }
  })
},

• 兒子組件使用

inject:['eventBus'],//注入事件
mounted() {
    //監(jiān)聽update:selected事件
  this.eventBus.$on('update:selected',(name,vm)=>{
    let headLeft = this.$el.getBoundingClientRect().left
    let {width,left} = vm.$el.getBoundingClientRect()
    this.$refs.line.style.width = width + 'px'
    this.$refs.line.style.left = left-headLeft +'px'
  })
},

• 孫子組件使用

created: function () {
    //監(jiān)聽update:selected事件
  this.eventBus.$on('update:selected', (name) => {
    this.active = this.name === name
  })
  console.log(this.name + this.disabled)
},
methods:{
  changeSelected(){
    if (this.disabled === true){return}
    //觸發(fā)update:selected事件，傳值
    this.eventBus.$emit('update:selected',this.name,this)
  }
}