要实现在第一个页面中的方法 onClick
调用第二个页面中的 updateBankToUser
方法,我们可以使用事件总线来实现跨组件通信。在Vue 3中,我们可以使用 mitt
库来创建事件总线。
首先,安装 mitt
库:
npm install mitt
然后,我们可以创建一个全局的事件总线,并在第二个页面中将 updateBankToUser
方法注册为一个事件处理程序,然后在第一个页面的 onClick
方法中触发这个事件,从而调用第二个页面中的方法。
以下是示例代码:
创建全局事件总线 bus.ts:
// bus.ts
import mitt from 'mitt';
export const bus = mitt();
第二个页面 user.vue:
<template>
<div>
<!-- ...其他代码... -->
<el-button @click="updateBankToUser">更新银行的用户</el-button>
</div>
</template>
<script setup>
import { bus } from './bus';
const updateBankToUser = async () => {
console.log('更新银行的用户');
// 在这里执行您的业务逻辑
}
bus.on('callUpdateBankToUser', updateBankToUser);
</script>
第一个页面 parent.vue:
<template>
<div>
<el-button @click="onClick">点击调用第二个页面的方法</el-button>
</div>
</template>
<script setup>
import { bus } from './bus';
const onClick = () => {
console.log('调用第二个页面的方法');
// 在这里执行您的业务逻辑
bus.emit('callUpdateBankToUser');
}
</script>
在这个示例中,我们在 bus.ts 中创建了一个全局事件总线 bus
。然后在第二个页面 user.vue 中,我们将 updateBankToUser
方法注册为名为 'callUpdateBankToUser' 的事件处理程序。在第一个页面 parent.vue 中的 onClick
方法中,我们使用 bus.emit
触发了 'callUpdateBankToUser' 事件,从而调用了第二个页面中的 updateBankToUser
方法。
通过这种方式,您可以在不直接引用第二个页面的情况下,实现跨组件调用其中的方法。
什么是全局事件总线bus.ts import mitt from 'mitt'; export const bus = mitt(); 两行的作用是啥
在这里,bus.ts
文件中的两行代码用来创建全局事件总线。全局事件总线是一个简单的事件管理器,它可以用于在应用程序中实现组件之间的通信,特别是当组件之间没有直接父子关系时。
具体来说,这两行代码的作用是:
import mitt from 'mitt';
: 这里我们导入了mitt
库,它是一个简单、小巧的 JavaScript 事件库。mitt
库允许我们创建事件总线,以便在应用程序的任何地方都可以访问该事件总线。export const bus = mitt();
: 在这里,我们创建了一个全局的事件总线bus
并将其导出。通过mitt()
调用,我们创建了一个新的事件总线实例,可以用来管理事件的注册、触发和取消。
总结起来,bus.ts
文件中的这两行代码的目的是创建一个全局的事件总线,以便在应用程序的任何地方都可以使用它进行组件之间的通信。通过这个全局事件总线,我们可以在不直接引用其他组件的情况下,实现组件之间的方法调用和数据传递。