19-Mitt

 

 

 

<template>
  <div>
    <EVue></EVue>
    <FVue></FVue>
  </div>
 
</template>
 
<script setup lang="ts">
import EVue from './Mix/E.vue';
import FVue from './Mix/F.vue';
 
 
</script>
 
<style lang="less" scoped>
 
</style>
 
 
<template>
  <div>
     <h1>E组件</h1>
     <button @click="emit">emit</button>
  </div>
</template>
 
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
 
const instance = getCurrentInstance()
 
const emit = () => {
  instance?.proxy?.$Bus.emit('on-emit1', 'mitt')
}
 
</script>
 
<style lang="less" scoped>
 
</style>
 
 
<template>
  <div>
     <h1>F组件</h1>
  </div>
</template>
 
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
 
const instance = getCurrentInstance()
 
const Bus = (str:any) => {
  console.log(str)
}
 
// instance?.proxy?.$Bus.on('*', Bus)  *可以监听多个值
// instance?.proxy?.$Bus.off('*', Bus)  也还有off方法可以关闭监听
 
instance?.proxy?.$Bus.on('on-emit1', Bus)
 
</script>
 
<style lang="less" scoped>
 
</style>