$bus.$on在created里父组件$bus.$emit传递的值
时间: 2023-07-17 15:10:12 浏览: 145
抱歉我之前理解错了你的问题。如果在子组件的 `created` 钩子函数中使用 `$bus.$on`,那么确实无法保证在父组件的 `$bus.$emit` 之前能够接收到值。这是因为在 `created` 钩子函数中,子组件还没有注册事件监听器。
为了解决这个问题,你可以将 `$bus.$on` 放在 `mounted` 钩子函数中,因为 `mounted` 钩子函数在组件挂载完成后执行,此时父组件的 `$bus.$emit` 已经触发了。
下面是修改后的示例代码:
```javascript
// 子组件
export default {
mounted() {
this.$bus.$on('custom-event', data => {
console.log(data); // 输出:传递给子组件的值
});
}
}
```
请注意,确保在不再需要事件监听时使用 `$off` 方法取消监听,以避免潜在的内存泄漏问题。
希望这次能解决你的问题!如果还有其他疑问,请随时提问。
相关问题
$bus.$emit父子之间传值
你可以使用 Vue 的事件总线 `$bus`(或者更常见的是 `$emit` 和 `$on`)来在父组件和子组件之间传递值。下面是一个简单的示例:
在父组件中,使用 `$emit` 来触发一个自定义事件,并传递值给子组件:
```javascript
// 父组件
export default {
methods: {
sendDataToChild() {
const data = '传递给子组件的值';
this.$bus.$emit('custom-event', data);
}
}
}
```
在子组件中,使用 `$on` 来监听父组件触发的事件,并接收传递的值:
```javascript
// 子组件
export default {
created() {
this.$bus.$on('custom-event', data => {
console.log(data); // 输出:传递给子组件的值
});
}
}
```
确保在适当的生命周期钩子函数中使用 `$on`,以便在父组件触发事件后能够正确地接收到值。同时,也要确保在适当的时候使用 `$off` 来取消监听事件,以避免内存泄漏。
希望这个示例对你有帮助!如果还有其他问题,请随时提问。
vue bus.$emit
在Vue中,可以使用事件总线来实现组件之间的通信。其中,$emit()方法用于触发一个事件,可以在事件总线上监听该事件的所有组件中接收到该事件并执行相应的操作。
下面是一个示例代码,演示了如何使用事件总线和$emit()方法:
```javascript
// main.js
import Vue from 'vue'
// 创建事件总线
const bus = new Vue()
// 把bus挂载到Vue的原型上,保证所有的组件都能通过this.$bus访问到事件总线
Vue.prototype.$bus = bus
// ComponentA.vue
export default {
methods: {
handleClick() {
// 触发事件
this.$bus.$emit('event-name', 'hello world')
}
}
}
// ComponentB.vue
export default {
created() {
// 监听事件
this.$bus.$on('event-name', (data) => {
console.log(data) // 输出:hello world
})
}
}
```
在上面的示例中,当ComponentA.vue组件中的handleClick()方法被调用时,会触发一个名为'event-name'的事件,并传递一个字符串参数'hello world'。而在ComponentB.vue组件中,通过监听'event-name'事件,可以接收到该事件并执行相应的操作,这里是将传递的字符串参数打印到控制台上。
阅读全文