export default Bus
时间: 2023-11-17 14:04:11 浏览: 61
在Vue中,我们可以使用`export default`关键字来导出一个对象、函数或类,以便在其他文件中使用。在这里,`export default Bus`是将一个Vue实例对象导出,这个Vue实例对象被命名为`Bus`。这个Vue实例对象可以用来在组件之间传递事件或数据,也可以用来作为全局事件总线。具体来说,我们可以在一个组件中使用`Bus.$emit()`方法来触发一个事件,然后在另一个组件中使用`Bus.$on()`方法来监听这个事件并获取传递的数据。这样就可以实现组件之间的通信了。
下面是一个使用`export default Bus`实现组件通信的例子:
在组件一中:
```javascript
<template>
<div>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
import Bus from './Bus'
export default {
methods: {
sendData() {
Bus.$emit('data', '这是一条数据')
}
}
}
</script>
```
在组件二中:
```javascript
<template>
<div>
<p>{{ receivedData }}</p>
</div>
</template>
<script>
import Bus from './Bus'
export default {
data() {
return {
receivedData: ''
}
},
mounted() {
Bus.$on('data', data => {
this.receivedData = data
})
}
}
</script>
```
这样,当在组件一中点击按钮时,就会触发`data`事件,并将数据`'这是一条数据'`传递给组件二,组件二就可以获取到这个数据并显示在页面上了。
阅读全文