Vue3+Ellement Pus+Vite项目怎么通知
时间: 2024-01-04 09:02:40 浏览: 35
你可以通过使用事件总线(Event Bus)来实现Vue3+Element Plus+Vite项目的通知功能。事件总线是一个非常简单的模式,它允许我们在不同的组件之间发送和接收事件。在Vue3中,可以使用createApp()方法创建Vue实例,并在该实例上使用provide()和inject()方法创建事件总线。
下面是一个简单的示例代码:
```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 创建事件总线
const eventBus = {}
app.provide('eventBus', eventBus)
app.mount('#app')
```
```javascript
// 组件A
export default {
name: 'ComponentA',
inject: ['eventBus'],
mounted() {
// 发送事件
this.eventBus.$emit('notify', 'Hello from ComponentA')
}
}
```
```javascript
// 组件B
export default {
name: 'ComponentB',
inject: ['eventBus'],
created() {
// 监听事件
this.eventBus.$on('notify', message => {
console.log(message)
})
}
}
```
在上面的代码中,我们创建了一个名为eventBus的对象,并将其提供给Vue实例。然后,在组件A中,我们发送了一个名为notify的事件,并在组件B中监听该事件。当事件被触发时,组件B将会收到来自组件A的通知信息。这样,我们就可以实现Vue3+Element Plus+Vite项目的通知功能了。