18-兄弟传参-Bus

 

 

 Bus.ts

<template>
  <div>
    <CVue @emitD="emitD"></CVue>
    <DVue :flag="Flag"></DVue>
  </div>
</template>

<script setup lang="ts">
  import { ref }  from 'vue'
  import CVue from './Mix/C.vue'
  import DVue from './Mix/D.vue';

  let Flag = ref(false)

  const emitD = (params:boolean) => {
    Flag.value = params
  }
</script>

<style lang="less" scoped>

</style>



<template>
   <div>
    <button @click="emitD">派发一个事件</button>
    <button @click="emitBus">Bus派发一个事件</button>
   </div>
</template>

<script setup lang="ts">
import Bus from '../../Bus'

const emit = defineEmits(['emitD'])
let flag = false
const emitD = () => {
  flag = !flag
  emit('emitD', flag)
}

const emitBus = () => {
  flag = !flag
  Bus.emit('emitBus', flag)
}
</script>

<style lang="less" scoped>

</style>



<template>
  <div class="B">
    {{ flag }}--- {{ params }}
  </div>
</template>

<script setup lang="ts">
  import Bus from '../../Bus'
  import {ref} from 'vue'
  type Props = {
    flag:boolean
  }
  defineProps<Props>()
  
  let params = ref(false)
  Bus.on('emitBus', (params1:boolean) => {
    params.value = params1
  })
</script>

<style lang="less" scoped>
  .B {
    width: 200px;
    height: 200px;
    color: #fff;
    font-size: 20px;
    background: rebeccapurple;
  }
</style>




type BusClass = {
  emit:(name:string) => void
  on:(name:string, callback:Function) => void
}

type PramsKey = string | number | symbol

type List = {
  [key:PramsKey]:Array<Function>
}

class Bus implements BusClass {
  list:List
  constructor() {
    this.list = {}
  }
  emit(name: string, ...args:Array<any>) {
    let eventName:Array<Function> = this.list[name]
    eventName.forEach(fn => {
      fn.apply(this, args)
    })
  }
  on (name:string, callback:Function) {
    let fn:Array<Function> = this.list[name] || []
    fn.push(callback)
    this.list[name] = fn
  }
}

export default new Bus()