vue组件事件总线传参
时间: 2023-08-24 07:10:01 浏览: 99
Vue传参一箩筐(页面、组件)
可以使用Vue.js的事件总线来传递参数,具体步骤如下:
1. 创建一个事件总线实例
可以在Vue实例中创建一个全局的事件总线实例,例如:
```
// main.js
import Vue from 'vue'
export const eventBus = new Vue()
```
2. 发送事件并传递参数
在需要发送事件的组件中,可以使用`eventBus.$emit`方法来触发事件,并传递参数,例如:
```
// componentA.vue
import { eventBus } from '@/main.js'
export default {
methods: {
handleClick() {
eventBus.$emit('eventName', '参数1', '参数2')
}
}
}
```
3. 接收事件并获取参数
在需要接收事件的组件中,可以使用`eventBus.$on`方法来监听事件,并在回调函数中获取传递的参数,例如:
```
// componentB.vue
import { eventBus } from '@/main.js'
export default {
mounted() {
eventBus.$on('eventName', (param1, param2) => {
console.log(param1, param2)
})
}
}
```
需要注意的是,事件总线在全局范围内有效,因此需要避免事件名称的重复,以免出现不必要的冲突。
阅读全文