vue 封装 on emit off 并调用

class Observe {
    constructor() {
        this.eventList = {}
    }
    on(eventName, callback) {
        console.log('on', eventName, callback)
        if(!this.eventList[eventName]) {
            this.eventList[eventName] = []
        }
        this.eventList[eventName].push(callback)
    }
    emit(eventName, params) {
        console.log('emit', eventName, params)
        if(this.eventList[eventName]) {
            this.eventList[eventName].map(cb => {
                console.log(this.eventList)
                cb(params)
            })
        }
    }
    off(eventName, callback) {
        if(this.eventList[eventName]) {
            if(callback) {
                let index = this.eventList[eventName].indexOf(callback)
                this.eventList[eventName].splice(index , 1)
            }
        } else {
            this.eventList[eventName].length = 0
        }
    }
}

export default new Observe();  //一定要导出公共的实例，不然注册不到同一个类里边

child1.vue

<template>
  <div >
      {{msg}}
  </div>
</template>

<script>
import observe from '../../utils/emit_on_off_fn'

export default {
  name: 'App',
  data() {
      return {
          msg: ''
      }
  },
  components: {
  },
  mounted() {
    //  let observe = new Observe()
     observe.on('watch', (val) => {
       console.log(val)
       this.msg = val
     })
     console.log(observe)
  },
}
</script>

<style>

</style>

child2.vue

<template>
  <div>
    <h3></h3>
    <button @click="clickEmit">click</button>
  </div>

</template>

<script>
import observe from '../../utils/emit_on_off_fn'

export default {
  data() {
    return {
      
    }
  },
  mounted() {
  },
  methods: {
    clickEmit() {
        // let event   = new Observe()
        observe.emit('watch', 'Hello')
    }
  },
}
</script>

<style>

</style>

index.vue

<template>
  <div>
    <h3>menu</h3>
    <child-1></child-1>
    <child-2></child-2>
  </div>

</template>

<script>
import child1 from './child1'

import child2 from './child2'


export default {
  data() {
    return {
    }
  },
  components: {
    child1,
    child2
  },
  mounted() {
  },
  methods: {

  },
}
</script>

<style>

</style>