前端消息中间件mitt实战开发运用

安装mitt

mpm i mitt

mitt工具

import mitt from 'mitt'
import { ref } from 'vue'

let emitter = mitt()
// 例子
let num = ref(0)

// 绑定事件
emitter.on('add', () => {
    console.log('add被调用了', num)
})
// 每隔1秒执行事件
setInterval(() => {
    // emitter.emit('add')
}, 1000)

setTimeout(() => {
    // 解绑事件
    emitter.off('add')
}, 5000)

export default emitter

引入到组件

import emitter from '@/utils/emitter'

父组件，引入通用组件，并传递消息主题

ImageUploader该组件是自定义的图片文件上传工具组件

msgItem是消息主题，子组件会获取该属性，并向该消息主题发送数据

  <el-form-item label="房间照片" prop="housePhoto">
      <ImageUploader msgItem="housePhotoMsgItem" />
    </el-form-item>

子组件（图片上传组件）

接收父组件的值

// 定义props  
const props = defineProps({  
    msgItem: {  
    type: String,  
    required: true, 
  },  
  // 其他props...  
}); 

发送数据

 emitter.emit(props.msgItem, commaSeparatedUrls.value)

父组件接收消息

emitter.on('housePhotoMsgItem', (value: string) => {
  ruleForm.housePhoto = value
  console.log('接收房间图片地址', ruleForm.housePhoto)
})
onUnmounted(() => {
  // 组件卸载之后，解绑事件
  emitter.off('housePhotoMsgItem')
})

如果父组件需要多次引入该子组件，只需要绑定不一样的消息主题，即可实现数据的获取。