總結(jié)：由于vue3 setup ts 中無法使用bus實現(xiàn)組件之間相互傳值
(注意： eventBus.emit 是xiangm向所有帶有 eventBus.on 子頁面?zhèn)鬟f消息不同的頁面根據(jù)不同的情況進行區(qū)分。

// 離開當前路由進行操作.
import { onBeforeUnmount  } from 'vue'
onBeforeUnmount(() => {
// 去掉監(jiān)聽
    eventBus.off("eventName")
})

1.npm 安裝 mitt插件

npm install mitt -save

2.在 components 文件下新建mitt文件，內(nèi)容如下

image.png

// mitt.ts
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;

3.組件1 使用

import eventBus  from '@/components/mitt'
// 傳遞了一個name為eventName的參數(shù)
 eventBus.emit('eventName', '參數(shù)data');

組件2 使用

eventBus.on('eventName', (eventData) => {
  // 處理接收到的數(shù)據(jù)
});

非常簡單就實現(xiàn)了頁面之間數(shù)據(jù)的相互傳遞。