1 问题描述
当一个页面中的某个变量的值发生变化时,另一个页面的相应数据需要及时更新,此时就需要在页面之间传递参数。然而不同的两个页面属于同级关系,不能通过父子组件传参的方式解决这个问题。
2 解决思路
- 全局事件总线 EventBus
- vuex + 监听器 (watch)
3 解决方法
-
【方法一】:配置全局事件总线(MITT)
-
全局安装 mitt 依赖包
npm i mitt -S
-
在 main.ts 中创建 mitt 实例并挂载到
app.config.globalProperties
上import App from './App.vue' import mitt from 'mitt' // 创建mitt实例 const EventBus = mitt() /** * 代码提示[……不存在属性"EventBus"……]是因为在app.config.globalProperties上挂载的EventBus * 要进行ComponentCustomProperties接口扩展才能获得类型识别 * ComponentCustomProperties接口是vue3提供的增强组件实例类型以支持自定义全局属性,通过TypeScript模块扩展来扩展的 */ declare module 'vue' { export interface ComponentCustomProperties { EventBus: typeof EventBus } } const app = createApp(App) // 全局挂载全局事件总线mitt app.config.globalProperties.EventBus = EventBus app.use(router).mount('#app')
-
在一个页面中广播事件
<template> <div> <button @click="handleItemChange">修改</button> </div> <template> <script lang="ts"> import { defineComponent, getCurrentInstance } from 'vue' export default defineComponent({ setup() { const instance = getCurrentInstance() const handleItemChange = () => { instance?.proxy?.EventBus.emit('itemChanged', { param: 'Sth. changed' }) } } }) <script>
-
在另一个页面中监听事件
<template> <div></div> <template> <script lang="ts"> import { defineComponent, getCurrentInstance } from 'vue' export default defineComponent({ setup() { const instance = getCurrentInstance() instance?.proxy?.EventBus.on('itemChanged', (param: any) => { console.log('收到信息' + param) }) } }) <script>
-
-
【方法二】:将 CarCode 存入 vuex 中,然后利用 watch() 监听其变化