$on $emit怎么传递信息
时间: 2023-11-19 20:56:38 浏览: 37
$on和$emit是Vue.js中用于组件之间通信的两个方法,可以通过它们来传递信息。
1. 在发送方组件中,使用$emit方法触发自定义事件,并传递需要传送的数据,例如:this.$emit('自定义事件名', 要传送的数据)。
2. 在接收方组件中,使用$on方法监听自定义事件,并接收传递过来的数据,例如:this.$bus.$on('自定义事件名', (params) => { console.log(params) })。
其中,$bus是Vue实例的一个属性,用于在不同组件之间传递信息。
相关问题
$on, $emit
$on和$emit是Vue.js中的两个方法,用于实现组件之间的通信。
$on方法用于监听当前实例上的自定义事件。通过调用$on方法,可以在当前组件中监听指定的事件,并在事件触发时执行相应的回调函数。\[2\]例如,在子组件a中,可以使用Bus.$on('changeSelect', callback)来监听名为'changeSelect'的事件。当事件触发时,回调函数会被执行。
$emit方法用于触发当前实例上的自定义事件。通过调用$emit方法,可以在当前组件中触发指定的事件,并传递相应的数据。\[1\]例如,在子组件a中,可以使用Bus.$emit('changeSelect', data)来触发名为'changeSelect'的事件,并传递数据data。
总结起来,$on方法用于监听事件,$emit方法用于触发事件。它们可以在组件之间实现数据的传递和通信。
#### 引用[.reference_title]
- *1* [$emit,$on,$off--vue](https://blog.csdn.net/weixin_57844432/article/details/126599659)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [$emit和$on 的使用详细演示](https://blog.csdn.net/weixin_35773751/article/details/109341465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue2 简单说明 $emit $on $off 的使用,防止$on多次触发](https://blog.csdn.net/mossbaoo/article/details/121262457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
$on和$emit兄弟组件传值
在 Vue.js 中,$on 和 $emit 是兄弟组件之间传值的常用方法。
$on 是一个事件监听器,用于在组件中监听特定的自定义事件。$on 可以在一个组件中监听另一个组件触发的事件。
$emit 是触发一个自定义事件的方法。它可以在一个组件中触发一个自定义事件,并且可以传递数据给监听这个事件的其他组件。
下面是一个简单的例子来演示如何使用 $on 和 $emit 进行兄弟组件传值:
在兄弟组件 A 中,我们可以使用 $emit 方法触发一个自定义事件,并传递需要传递的数据:
```javascript
// 兄弟组件 A
methods: {
sendDataToB() {
this.$emit('customEvent', data);
}
}
```
在兄弟组件 B 中,我们可以使用 $on 方法来监听兄弟组件 A 触发的自定义事件,并接收传递的数据:
```javascript
// 兄弟组件 B
mounted() {
this.$on('customEvent', this.handleCustomEvent);
},
methods: {
handleCustomEvent(data) {
// 处理传递过来的数据
}
}
```
通过这种方式,兄弟组件 A 将数据通过自定义事件传递给兄弟组件 B。当兄弟组件 A 中触发了自定义事件时,兄弟组件 B 中的 handleCustomEvent 方法会被调用,并接收到传递的数据。
希望以上解答对你有帮助!如果还有其他问题,请随时提问。